跨域

585 阅读1分钟

CORS

简单请求

  • get / post / head
  • HTTP 的头信息不超出以下几种字段
    • accept
    • accept-language
    • content-language
    • last-event-id
    • content-type (application/x-www-form-urlencoded、multipart/form-data、text/plain)

浏览器自带 origin 字段,服务器端返回 Access-Control-Allow-Origin 域名信息。默认不带 cookie,需要的话 xhr 设置属性 withCredentials 为 true,然后服务端返回 Access-Control-Allow-Credentials 字段,这时候返回的指定域名不能设置为 *

非简单请求

先发预检请求,(当前网页所在的域名是否在服务器的许可名单之中,以及可以使用哪些HTTP动词和头信息字段),服务器返回 :

Access-Control-Allow-Methods: GET, POST, PUT // 支持的方法
Access-Control-Allow-Headers: X-Custom-Header // 支持的头信息字段
Access-Control-Allow-Credentials: true 
Access-Control-Max-Age: 1728000 // 可选,本次请求的有效时间

然后就跟简单请求一样。

JSONP

利用 <script><img><iframe> 等标签不受同源策略限制,可以从不同域加载并执行资源的特性,来实现数据跨域传输。 与服务端约定好一个回调函数名,服务端接收到请求后,将返回一段 Javascript,在这段 Javascript 代码中调用了约定好的回调函数,并且将数据作为参数进行传递。当网页接收到这段 Javascript 代码后,就会执行这个回调函数,这时数据已经成功传输到客户端了。

Nginx 代理

Websocket

postMessage 跨域

document.domain + iframe 跨域