[TOC]

跨域到实现机制

xhr的跨域

xhr中的跨域，通过CROS策略：服务器返回 Access-Control-Allow-Origin 来实现。

fetch的跨域

fetch的跨域，有多种形式，具体体现在 mode 属性的设置上

  1. same-origin，不允许跨域，否则会返回error，对应response type 为 basic
  2. cors，支持跨域，和xhr的CORS形式一样，对应response type 为 cors
  3. no-cors，用于跨域但是服务器不带CORS响应头，是fetch特殊的跨域请求方式，对应response type 为 opaque

对于no-cors的方式，浏览器虽然可以发送跨域的请求，但是不能访问响应的内容。 opaque - 不透明，大概就是对js调用方不可见的意思。

cookie的发送

xhr

需要同时满足

  • 服务器指定 Access-Control-Allow-Credentials: true

  • 开发者需要在AJAX请求中打开 withCredentials 属性

    fetch

    credentials属性

  • omit，默认值，忽略cookie发送

  • same-origin，cookie只能同域发送
  • include，即可同域，也可以跨域发送

    脚本的crossorigin

    识别错误信息

    script标签的onerror中只反馈了很少的内容。要想识别具体的错误信息需要做到两点：
  1. script标签添加 crossorigin 属性，代表我希望服务器满足CORS策略时看到详细错误
  2. 服务端支持 Access-Control-Allow-Origin 允许被跨域访问到

    可用的属性值

    crossorigin
  • 不写这个属性，代表no-cors，cookie发送策略为omit
  • 值为’’ 或者 ‘anonymous’，代表cors，cookie发送策略为same-origin（参考fetch）
  • 值为’use-credentials’，代表cors，cookie发送策略为same-origin（参考fetch）

注：对于使用第三方脚本，当然是只希望对方支持CORS，同时不发送本站cookie给它。

如何进行设置

  1. 在