跨域

跨域是什么？

跨域

当前页面中的某个接口请求的地址和当前页面的地址如果协议、域名、端口其中有一项不同，就说该接口跨域了。在前后端分离的模式下，前后端的域名是不一致的，此时就会发生跨域问题。

跨域报错信息

跨域限制的原因

浏览器为了保证网页的安全，出的同源协议策略。

同源策略

跨域问题其实就是浏览器的同源策略所导致的。
「同源策略」是一个重要的安全策略，它用于限制一个 origin 的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。
只有当「protocol（协议）、domain（域名）、port（端口）三者一致」才是同源。

如何解决跨域？

跨域解决方案

方式一：cors

目前最常用的一种解决办法，通过设置后端允许跨域实现。它允许浏览器向跨源服务器，发出 XMLHttpRequest 请求，从而克服了 AJAX 只能同源使用的限制。CORS 需要浏览器和服务器同时支持。

缺点

我们的服务器端需要设置一个源，这个源可以写*(具体地址)，此处的*表示可以携带多个源，表示支持多源，就不能再允许携带 cookie 了（因为设置了多源，浏览器为了保证 cookie 的安全，所以设置为不允许携带）
res.setHeader(‘Access-Control-Allow-Origin’, ‘*‘);
res.setHeader(“Access-Control-Allow-Methods”, “GET, PUT, OPTIONS, POST”)

方式二：nginx 反向代理

跨域限制的时候浏览器不能跨域访问服务器， nginx 反向代理，让请求发给代理服务器，静态页面和代理服务器是同源的，然后代理服务器再向后端服务器发请求，服务器和服务器之间不存在同源限制。nginx 则是通过反向代理的方式，（这里也需要自定义一个域名）这里就是保证我当前域，能获取到静态资源和接口，不关心是怎么获取的。

方式三：JSONP

利用的原理是 script 标签可以跨域请求资源，将回调函数作为参数拼接在 url 中。后端收到请求，调用该回调函数，并将数据作为参数返回去，注意设置响应头返回文档类型，应该设置成 javascript。

jsonp 的作用

利用浏览器的同源策略，解决跨域问题

优点

简单适用，兼容性好（可以兼容低版本 IE）

缺点

只支持 get 请求，不支持 post 请求，导致数据不安全。

方式四：使用 jQuery 的 jsonp 插件

特点：

get 请求、 post 请求；
但从服务器从获取的数据，依然是 jsonp 格式。

解决跨域