前端跨域请求配置及Cookie

常用跨域与非跨域请求配置

通常情况下，跨域请求都需要 后端配合 返回响应头，让浏览器允许跨域请求。
下面用 ES6 的 fetch 来举例：

---

/*
1. 一般跨域请求，需要后端配合，需要返回响应头：

Access-Control-Allow-Origin: * 或 具体域名
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
*/
fetch("www.example.com", {
  mode: "cors",
});

/*
2. 携带用户凭证(Cookie)的跨域请求，需要后端配合，需要返回响应头：

Access-Control-Allow-Origin: 必须是具体域名
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: Cookie
*/
fetch("www.example.com", {
  mode: "cors",
  credentials: "include",
});

/*
3. 同域简单请求，不需要后端配合设置响应头，
不能用自定义请求头，自然也不能携带Cookie，
*/
fetch("www.example.com", {
  mode: "no-cors",
});

/*
4. 同域普通请求，不需要后端配合设置响应头，
可以用自定义请求头，可以能携带Cookie，
*/
fetch("www.example.com", {
  mode: "same-origin",
  credentials: "include", // 可以发也可以不发用户凭证(Cookie)
});

no-cors 与 same-origin 的对比

特性	no-cors	same-origin
请求类型	只能是简单请求(GET、POST、HEAD)	可以是简单请求或复杂请求
是否允许跨域	不允许跨域	只适用于同源请求
允许发送的头信息	受到严格限制，不能使用自定义请求头，并且头信息内容也受到限制，比如 Content-Type 只能是 application/x-www-form-urlencoded、multipart/form-data 或 text/plain	更灵活，可以发送自定义头信息
是否发送用户凭证	不发送用户凭证(Cookie)	可以发送也可以不发送(Cookie)
响应内容的访问权限	不允许 JavaScript 获取响应内容	可以通过 JavaScript 获取响应内容