JavaScript中的CORS

简介

CORS (Cross-Origin Resource Sharing) 是一种机制，允许Web应用程序在浏览器中访问不同域的资源。这是因为浏览器的同源策略限制了在浏览器上通过JavaScript发起的跨域请求，如从不同的域、端口或协议访问资源。

通过使用CORS，Web应用程序可以通过XMLHttpRequest或Fetch API访问跨域资源，而无需浏览器像传统的跨域请求那样执行预检请求。

工作原理

CORS允许服务器在响应头中设置Access-Control-*，以允许客户端跨域请求访问资源。例如，以下响应头允许客户端从任何来源、使用任何HTTP方法和任何自定义标头来访问资源。

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: *
Access-Control-Allow-Headers: *

在客户端代码中，我们可以使用XMLHttpRequest或Fetch API来发起跨域请求。如果请求的资源位于同一源，则不需要设置任何特殊配置。但如果目标资源位于不同域，则需要设置以下选项：

const request = new XMLHttpRequest();
request.open('GET', 'https://example.com/api/data');
request.withCredentials = true;
request.setRequestHeader('X-Custom-Header', 'value');
request.send();

这里，我们使用XMLHttpRequest向example.com的API发出GET请求，同时将withCredentials设置为true，以允许包括cookie在内的凭据与请求一起发送。我们还设置了自定义标头X-Custom-Header与请求一起发送。

预检请求

CORS规范要求浏览器在发出某些类型的跨域请求之前，先向服务器发送一个预检请求。预检请求是OPTIONS请求类型，带有自定义的HTTP头，并询问服务器是否支持跨域请求。

若服务器返回许可，则客户端可以发出实际请求来获取资源。这种方式可以避免关键资源被盗用，因为在发出实际请求之前，浏览器会询问资源所有者是否接受跨域请求。

可跨域资源类型

以下资源可以通过CORS进行以跨域的可控访问。

• HTTP/HTTPS请求
• WebSocket请求
• WebFonts
• WebGL贴图
• 使用drawImage API绘制的图像和视频
• WebAudio

结论

CORS是一种重要的Web安全机制，它可以确保资源被正确地保护和访问。在编写JavaScript应用程序时，确保对这种机制有充分的理解是至关重要的。