跨域问题 | 奇趣生活实验室

为什么会跨域

跨域是受浏览器限制而产生的，浏览器基于同源策略组织跨域资源

同源策略，即协议+域名+端口号不同即为跨域可window.origin查看源同源策略限制了不同源的站点读取当前站点的 Cookie、IndexDB、LocalStorage 等数据。

解决方案

主流的解决方案以下3种

jsonp

不常用

Cors

全称为Cross-Origin Resource Sharing 跨域资源共享,实现CORS通信的关键是服务器

 'Access-Control-Allow-Origin' //源

 'Access-Control-Allow-Headers' //请求头

 'Access-Control-Allow-Methods' //请求方法

 'Access-Control-Allow-Credentials' //cookie

响应头包含以上3个则可设置cors

简单请求会带上Origin 字段

简单请求需同时满意以下两个条件

请求方法为HEAD GET POST
请求头为Accept、Accept-Language 、Content-Language 、Last-Event-ID 、Content-Type ：只限于三个值 application/x-www-form-urlencoded、multipart/form-data、text/plain

非简单请求

非简单请求会先发送OPTIONS 来询问,如果浏览器否定了“预检”请求，会返回一个正常的HTTP回应，但是没有任何CORS相关的头信息字段，这时浏览器就会认定服务器不同意预检请求，触发错误；

通过预检请求后请求头会带上Origin 字段

我们一般用json交互都是非简单请求application/json

Cookie 需要设置proxy_cookie_domain node设置cookieDomainRewrite

反向代理

线上可nginx或者koa反向代理

利用了服务器对服务器没有同源限制

server {

  listen  80;

  server_name  client.com;

  location /api {

    proxy_pass server.com;

  }

}