跨域
跨域学习
什么是跨域？
跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。
广义的跨域：
1.资源跳转： A链接、重定向、表单提交
2.资源嵌入： <link>、<script>、<img>、
<frame>等dom标签，
还有样式中background:url()、
@font-face()等文件外链
3.脚本请求： js发起的ajax请求、dom和js对象的跨域操作等
其实我们通常所说的跨域是狭义的，是由浏览器同源策略限制的一类请求场景。
什么是同源策略？
同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。
同源策略限制以下几种行为：
1.Cookie、LocalStorage 和 IndexDB 无法读取
2.DOM 和 Js对象无法获得
3.AJAX 请求不能发送
跨域：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。 这里说明一下，无法跨域是浏览器对于用户安全的考虑，如果自己写个没有同源策略的浏览器，完全不用考虑跨域问题了。是浏览器的锅，对。 同源策略限制了一下行为： Cookie、LocalStorage 和 IndexDB 无法读取 DOM 和 JS 对象无法获取 Ajax请求发送不出去
例如：a页面想获取b页面资源，如果a、b页面的协议、域名、端口、子域名不同，所进行的访问行动都是跨域的，而浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源。注意：跨域限制访问，其实是浏览器的限制。理解这一点很重要！！！
同源策略：是指协议，域名，端口都要相同，其中有一个不同都会产生跨域。狭义的同源就是指域名、协议、端口均为相同。
跨域问题的解决方案
解决跨域问题的方式也有多种。
1、前后端结合（JsonP）
虽然jsonp也可以实现跨域，但是因为jsonp不支持post请求，应用场景受到很大限制，所以这里不对jsonp作介绍。
2、纯后端方式一（CORS方式）
CORS 是w3c标准的方式，通过在web服务器端设置：响应头Access-Cntrol-Alow-Origin 来指定哪些域可以访问本域的数据，ie8&9(XDomainRequest)，10+,chrom4，firefox3.5,safair4，opera12支持这种方式。
服务器代理，同源策略只存在浏览器端，通过服务器转发请求可以达到跨域请求的目的，劣势：增加服务器的负担，且访问速度慢。
图片如果无法加载，推荐访问原文：https://cloud.tencent.com/developer/article/1648860
3.纯后端方式二（Nginx代理方式）【建议这种方式】
首先配置Nginx的反向代理方式
图片如果无法加载，推荐访问原文：https://cloud.tencent.com/developer/article/1648860
代理访问正常
8082的服务访问Nginx，出现了跨域问题
Nginx配置跨域解决
location / {
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
if ($request_method = 'OPTIONS') {
return 204;
}
proxy_pass http://192.168.12.1:8081;
}
解决了跨域问题
参数说明
Access-Control-Allow-Origin
服务器默认是不被允许跨域的。给Nginx服务器配置Access-Control-Allow-Origin *后，表示服务器可以接受所有的请求源（Origin）,即接受所有跨域的请求。
Access-Control-Allow-Headers
是为了防止出现以下错误：
Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.
这个错误表示当前请求Content-Type的值不被支持。其实是我们发起了"application/json"的类型请求导致的。这里涉及到一个概念：预检请求（preflight request）,请看下面"预检请求"的介绍。
Access-Control-Allow-Methods
是为了防止出现以下错误：
Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.
给OPTIONS 添加 204的返回
是为了处理在发送POST请求时Nginx依然拒绝访问的错误,发送"预检请求"时，需要用到方法 OPTIONS ,所以服务器需要允许该方法。&#
Access-Control-Allow-Credentials
这个是服务端下发到客户端的 response 中头部字段，意义是允许客户端携带验证信息，例如 cookie 之类的。这样客户端在发起跨域请求的时候，不仅可以携带允许的头，还可以携带验证信息的头，由于客户端是请求框架是 axios，并且手残的设置了 withCredentials: true，意思是客户端想要携带验证信息头，但是我的服务端设置是 'supportsCredentials' => false, ，表示不允许携带信息头，好了，错误找到了。
我们的客户端和服务端交互的时候使用的是 token，通过 Authorization头发送到服务端，并没有使用到 cookie，所以客户端没有必要设置 withCredentials: true
VUE前端协同调试
- 当前端配置withCredentials=true时, 后端配置Access-Control-Allow-Origin不能为*, 必须是相应地址。
- 当配置withCredentials=true时, 后端需配置Access-Control-Allow-Credentials。
- 当前端配置请求头时, 后端需要配置Access-Control-Allow-Headers为对应的请求头集合
withCredentials=false就行了
预检请求（preflight request）
跨域资源共享(CORS)标准新增了一组 HTTP 首部字段，允许服务器声明哪些源站有权限访问哪些资源。另外，规范要求，对那些可能对服务器数据产生副作用的HTTP 请求方法（特别是 GET 以外的 HTTP 请求，或者搭配某些 MIME 类型的 POST 请求），浏览器必须首先使用 OPTIONS 方法发起一个预检请求（preflight request），从而获知服务端是否允许该跨域请求。服务器确认允许之后，才发起实际的 HTTP 请求。在预检请求的返回中，服务器端也可以通知客户端，是否需要携带身份凭证（包括 Cookies 和 HTTP 认证相关数据）。 其实Content-Type字段的类型为application/json的请求就是上面所说的搭配某些 MIME 类型的 POST 请求,CORS规定，Content-Type不属于以下MIME类型的，都属于预检请求 所以 application/json的请求 会在正式通信之前，增加一次"预检"请求，这次"预检"请求会带上头部信息 Access-Control-Request-Headers: Content-Type：
OPTIONS /api/test HTTP/1.1
Origin: http://foo.example
Access-Control-Request-Method: POST
Access-Control-Request-Headers: Content-Type
... 省略了一些
服务器回应时，返回的头部信息如果不包含Access-Control-Allow-Headers: Content-Type则表示不接受非默认的的Content-Type。即出现以下错误：
Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.
什么是CORS跨域请求的简单请求和非简单请求
- 同时满足两大条件，就属于简单请求
- 请求方式：GET、POST、HEAD（注：什么是HEAD请求？HEAD请求和GET本质是一样的，但是HEAD请求不含数据，只有HTTP头部信息）
- HTTP头部信息不超过一下几种字段：无自定义头部字段、Accept、Accept-Language、Content-Language、Last-Event-ID、Content-Type（只有三个值application/x-www-form-urlencoded、multipart/form-data、text/plain）
- 非简单请求
- 请求方式：PUT、DELETE
- 自定义头部字段
- 发送json格式数据
- 正式通信之前，浏览器会先发送OPTION请求，进行预检，这一次的请求称为“预检请求”
- 服务器成功响应预检请求后，才会发送真正的请求，并且携带真实数据
客户端示例
$.ajax({
url:'http://127.0.0.1:8000/getData.html',
type:'put',
success: function(data){
console.log(data);
},
})
网络请求返回示例：
服务端处理
- 由于出现跨域的问题，所以服务端需要设置同意任意跨源请求：
- Access-Control-Allow-Origin: *
- 服务端的"OPTION-预检"里边一定要包含允许客户端使用非简单方式请求数据的响应头：
- 预检”请求时，允许请求方式则需服务器设置响应头：Access-Control-Request-Method
- 预检”请求时，允许请求头则需服务器设置响应头：Access-Control-Request-Headers
- 预检”缓存时间，服务器设置响应头：Access-Control-Max-Age
- 检查Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段以后，确认允许跨源请求
- 服务端同意预检请求，客户端会发送真正的请求；服务端不同意预检请求，因此触发一个错误，返回到客户端
注意
- 虽然可以通过设置响应头和响应方式等支持非简单请求,但是不到万不得已的情况,不能允许客户端发送非简单请求。因为非简单请求会使服务器比简单请求的多一倍的压力。
好文链接
什么是跨域？如何解决？：https://www.jianshu.com/p/8fa2acd103ea
什么是跨域？如何实现（详解）：https://zhuanlan.zhihu.com/p/124919549
什么是跨域？解决方案有哪些？：https://cloud.tencent.com/developer/article/1175899
一篇文章让你搞懂如何通过Nginx来解决跨域问题：https://cloud.tencent.com/developer/article/1648860
浅谈CORS跨域请求的简单请求和非简单请求：https://www.jianshu.com/p/ebd498cc3c52
