关于浏览器跨域

Question

由于浏览器同源策略问题，当页面和请求的协议，主机或者端口不同时，则会判定为不同的域。即跨域请求

原因

同源策略

判定

协议，主机，port

解决办法

CORS

后端返回响应头加上 Access-Control-Allow-*

跨域时不同的请求的处理方式是不同的，简单分为两类，简单和需预检请求

简单请求：GET,POST,HEAD 。 此类请求不会发送预检请求

其他请求会发送 OPTIONS 请求，来判定 Access-Control-Allow-* 是否被允许

1. Access-Control-Allow-Origin 表示允许的来源
2. Access-Control-Allow-Methods 表示允许的请求方法
3. Access-Control-Allow-Headers 表示允许的请求头
4. Access-Control-Allow-Credentials 表示允许携带认证信息

反向代理

可以后端创建一个同源的服务，用来做代理，利用服务端不受限制的特性来做接口转发处理

JSONP

以前很流行，现在很少用，只支持 GET 请求

就是利用加载 JS 不跨域的特性，使用 script src 发送 get 请求，然后服务端返回将数据包裹在回调函数中进行返回。当请求返回回调函数时，该函数就会执行，实现跨域请求数据的需求。

原理相同的还有 ImgP

其他

1. postMessage
2. window.name 结合 iframe 拿去跨域页面数据
3. docment.domain 没用过

扩展

1. localStorage 也存在跨域问题
2. 针对跨域脚本，一般无法捕获具体错误。可以加上 crossorigin="anonymouse" 加上 JS 返回允许跨域，即可显示详细堆栈
3. canvas 绘制图片元素时也存在跨域限制，可以使用上述同种方法进行解决