造成跨域的两种策略

浏览器的同源策略会导致跨域，这里同源策略又分为以下两种

• dom同源策略：禁止对不同源页面DOM进行操作。这里主要场景是iframe跨域的情况，不同域名的iframe是限制互相访问的。
• XmlHttpRequest同源策略：禁止使用XHR对象向不同源的服务器地址发起HTTP请求。

只要协议、域名、端口有任何一个不同，都被当作是不同的域，之间的请求就是跨域操作。

在同源策略下会禁止跨域，实际上跨域请求时，请求会向服务器发出，服务器也会进行响应，但是当收到返回的数据时发现跨域所以忽略了返回的内容并报错。

简单请求

当请求同时满足下面两个条件时，浏览器会直接发送GET请求，在同一个请求中做跨域权限的验证。 
请求方法是下列之一：

• GET
• HEAD
• POST

请求头中的Content-Type请求头的值是下列之一：

• application/x-www-form-urlencoded
• multipart/form-data
• text/plain

简单请求时，浏览器会直接发送跨域请求，并在请求头中携带Origin 的header，表明这是一个跨域的请求。 
服务器端接到请求后，会根据自己的跨域规则，通过Access-Control-Allow-Origin和Access-Control-Allow-Methods响应头，来返回验证结果。

预检请求

当请求满足下面任意一个条件时，浏览器会先发送一个OPTION请求，用来与目标域名服务器协商决定是否可以发送实际的跨域请求。 
请求方法不是下列之一：

• GET
• HEAD
• POST

请求头中的Content-Type请求头的值不是下列之一：

• application/x-www-form-urlencoded
• multipart/form-data
• text/plain

浏览器在发现页面中有上述条件的动态跨域请求的时候，并不会立即执行对应的请求代码，而是会先发送Preflighted requests（预先验证请求），Preflighted requests是一个OPTION请求，用于询问要被跨域访问的服务器，是否允许当前域名下的页面发送跨域的请求。 
OPTIONS请求头部中会包含以下头部：Origin、Access-Control-Request-Method、Access-Control-Request-Headers。 
服务器收到OPTIONS请求后，设置Access-Control-Allow-Origin、Access-Control-Allow-Method、Access-Control-Allow-Headers头部与浏览器沟通来判断是否允许这个请求。 
如果Preflighted requests验证通过，浏览器才会发送真正的跨域请求。

HTTP Header

Request header

Origin 
Origin头在跨域请求或预先请求中，标明发起跨域请求的源域名。

Access-Control-Request-Method 
Access-Control-Request-Method头用于表明跨域请求使用的实际HTTP方法

Access-Control-Request-Headers 
Access-Control-Request-Headers用于在预先请求时，告知服务器要发起的跨域请求中会携带的请求头信息

Response header

Access-Control-Allow-Origin 
Access-Control-Allow-Origin头中携带了服务器端验证后的允许的跨域请求域名，可以是一个具体的域名或是一个*（表示任意域名）。简单请求时，浏览器会根据此响应头的内容决定是否给脚本返回相应内容，预先验证请求时，浏览器会根据此响应头决定是否发送实际的跨域请求。

Access-Control-Expose-Headers 
Access-Control-Expose-Headers头用于允许返回给跨域请求的响应头列表，在列表中的响应头的内容，才可以被浏览器访问。

Access-Control-Max-Age 
Access-Control-Max-Age用于告知浏览器可以将预先检查请求返回结果缓存的时间，在缓存有效期内，浏览器会使用缓存的预先检查结果判断是否发送跨域请求。

Access-Control-Allow-Credentials 
Access-Control-Allow-Credentials用于告知浏览器当withCredentials属性设置为true时，是否可以显示跨域请求返回的内容。简单请求时，浏览器会根据此响应头决定是否显示响应的内容。预先验证请求时，浏览器会根据此响应头决定在发送实际跨域请求时，是否携带认证信息。

Access-Control-Allow-Methods 
Access-Control-Allow-Methods用于告知浏览器可以在实际发送跨域请求时，可以支持的请求方法，可以是一个具体的方法列表或是一个*（表示任意方法）。简单请求时，浏览器会根据此响应头的内容决定是否给脚本返回相应内容，预先验证请求时，浏览器会根据此响应头决定是否发送实际的跨域请求。

Access-Control-Allow-Headers 
Access-Control-Allow-Headers用于告知浏览器可以在实际发送跨域请求时，可以支持的请求头，可以是一个具体的请求头列表或是一个*（表示任意请求头）。简单请求时，浏览器会根据此响应头的内容决定是否给脚本返回相应内容，预先验证请求时，浏览器会根据此响应头决定是否发送实际的跨域请求。

链接: https://fly63.com/article/detial/855