cors跨域解析

---

一、实现CORS跨域前，我们首先需要了解什么是跨域？

1，浏览器禁用安全协议

如果两个地址的 协议， 地址，端口 三者任何一个不一样 发送ajax请求就会发生跨域的行为。

在公司开发的过程中， 只需要自己给浏览器设置特定的字段，禁用了他的安全协议就可以任意访问。

在原始桌面浏览器上面  右键新建快捷方式， 然后再上面右键 查看属性；
 然后再属性的目标位置， 加上一个空格，再接上下面的一段话；  
 并且要在c潘下面创建 一个下面的目录
 --disable-web-security --user-data-dir=C:\MyChromeDevUserData

2，什么是cors跨域

-- CORS（Cross-Origin Resource Sharing）跨域资源共享，定义了必须在访问跨域资源时，
浏览器与服务器应该如何沟通。
-- CORS的基本思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是失败。
-- 目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。整个CORS通信过程，都是浏览器自动完成，不需要用户参与。
-- 对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。
-- 浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，
但用户不会有感觉。

3、简单请求和非简单请求

浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。
只要同时满足以下两大条件，就属于简单请求。

1、请求方法是以下三种方法之一：
HEAD、GET、POST

2、HTTP的头信息不超出以下几种字段：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
凡是不同时满足上面两个条件，就属于非简单请求。浏览器对这两种请求的处理，是不一样的。

4，实现cors跨域方法

response headers  后端传递到前端的请求头
request headers  这个是前端传递给后端的请求头

-- Access-Control-Allow-Origin   是允许跨域的域名

-- Access-Control-Allow-Methods  
是允许的请求方式 （简单请求指的是GET POST HEAD）

-- Access-Control-Allow-Headers  
跨域允许包含的头，指定浏览器CORS请求会额外发送的头信息字段

-- Access-Control-Allow-Credentials  
true   表示是否允许发送Cookie, 只能设置为true，  这个要对应前端库例如 axios 开启 
withCredentials属性

-- Access-Control-Allow-Credentials 响应头表示是否可以将对请求的响应暴露给页面。返回true则可以，
其他值均不可以。

-- Access-Control-Allow-Credentials 头 工作中与XMLHttpRequest.withCredentials 或Fetch API中的
Request() 构造器中的credentials 选项结合使用。Credentials必须在前后端都被配置.
（即the Access-Control-Allow-Credentials header 和 XHR 或Fetch request中都要配置）才能使带
credentials的CORS请求成功。

*总结

-- 前面有提到HTTP头部和CORS跨域请求，CORS全称Cross-origin resource sharing，也就是跨域资源共享，
浏览器出于安全角度考虑限制跨域HTTP请求，这就是同源策略，所以后端需要设置请求头部才能允许跨域。