你可能不知道的CORS跨域资源共享

下面是关于CORS跨域资源共享的详细讲解，希望能对你有所帮助。

CORS是什么

CORS（Cross-Origin Resource Sharing）跨域资源共享，是用来解决跨域访问的一种技术。由于浏览器实行同源策略（Same-Origin Policy），如果一个URL的协议、域名和端口都与当前页面的协议、域名和端口相同，则就是同源；否则就是跨域，跨域请求将被浏览器拒绝。

CORS允许浏览器向跨源服务器发送XMLHttpRequest请求，从而克服了同源策略产生的限制。在浏览器向服务器发送请求时，会先发送一个OPTIONS请求，以判断是否允许跨域访问。如果服务器允许，则返回一个带有Access-Control-Allow-Origin头的响应，表示允许当前域名的请求。客户端在收到响应后，再发送真正的请求。

CORS请求的流程

CORS请求的流程如下：

1. 客户端通过XMLHttpRequest对象发起CORS请求。

2. 浏览器发现这个请求跨域，会添加一个Origin头信息，表示这个请求来自哪个域名。

3. 服务端接收到请求并处理，发送一个响应，在响应头中添加Access-Control-Allow-Origin头信息，表示该请求的响应可以被发起请求的源接受。

4. 浏览器收到响应后，判断是否允许发送该响应内容。如果允许，则把响应内容作为XMLHttpRequest对象的response属性，并触发xhr的onload事件。如果不允许，则返回一个异常。

示例说明

下面给出两个CORS跨域的示例：

示例一：

假设有两个网站：http://a.com 和 http://b.com。现在，在 http://a.com 的页面中通过JavaScript代码向 http://b.com 请求数据。由于跨域访问，浏览器会自动发送OPTIONS请求，判断是否允许跨域。所以在 http://b.com 的服务器端代码中，需要添加如下代码：

response.headers["Access-Control-Allow-Origin"] = "http://a.com"

表示允许 http://a.com 域名的请求。

示例二：

假设有两个网站：http://a.com 和 http://b.com。现在，在 http://a.com 的页面中通过XMLHttpRequest对象向 http://b.com 请求数据。在服务器端，需要按照如下方式添加响应头：

response.headers["Access-Control-Allow-Origin"] = "http://a.com"
response.headers["Access-Control-Allow-Headers"] = "Content-Type"
response.headers["Access-Control-Allow-Methods"] = "POST, GET, OPTIONS"

• 第一行表示允许 http://a.com 域名的请求；

• 第二行表示允许发送Content-Type请求头；

• 第三行表示允许POST、GET和OPTIONS方法的请求。

总结

CORS是解决跨域问题的一种通用方法，可以实现安全地访问跨域资源。在使用CORS时，需要按照规范添加Access-Control-Allow-*系列响应头信息，来实现对跨域请求的正确响应。