跨源资源共享（CORS）

一、跨源资源共享（CORS）介绍

        跨源资源共享（Cross-Origin Resource Sharing，CORS）是一种web标准技术，它允许一个网站的服务器来响应其他网站的请求，从而打破了同源策略的限制。通过CORS，浏览器可以接收到服务器的响应，并查看该响应头部的"Access-Control-Allow-Origin"字段，如果该字段的值允许，或者是"*"（表示接受所有域），浏览器才会处理响应。通过CORS策略网站可以分享其资源，而不必担忧安全问题。

二、受到同源策略影响的一些操作

        AJAX请求：同源策略会阻止使用XMLHttpRequest或Fetch API发起的跨域请求。

        DOM访问：来自不同源的网站不能访问彼此的DOM。

        Cookie，LocalStorage和IndexedDB：JavaScript不能读取到其他网站的数据。

        但请注意，同源策略并非所有Web行为都有影响。例如，<img>元素、<script>元素和<link>元素等可以加载任何网站的资源，这是因为这些操作并不会访问到其他源的文档或脚本。

三、简单请求示例

        某些请求不会触发 CORS 预检请求。如：

        1、GET、HEAD、POST方法

        2、除了被用户代理自动设置的标头字段

        3、Content-Type 标头所指定的媒体类型的值仅限于下列三者之一：（text/plain、multipart/form-data、application/x-www-form-urlencoded）

        4、请求中没有使用 ReadableStream 对象

        假如站点 https://foo.example 的网页应用想要访问 https://bar.other 的资源。foo.example 的网页中可能包含类似于下面的 JavaScript 代码：

const xhr = new XMLHttpRequest();
const url = "https://bar.other/resources/public-data/";
xhr.open("GET", url);
xhr.onreadystatechange = someHandler;
xhr.send();

        浏览器发送给服务器的请求报文：

Copy to Clipboard
GET /resources/public-data/ HTTP/1.1
Host: bar.other
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:71.0) Gecko/20100101 Firefox/71.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Connection: keep-alive
Origin: https://foo.example

        服务器响应:

HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 00:23:53 GMT
Server: Apache/2
Access-Control-Allow-Origin: *
Keep-Aliv