fetch 跨域请求

CORS

cors是"Cross-Origin Resource Sharing"的简称，是实现跨域的一种方式，相对于其他跨域方式，比较灵活，而且不限制发请求使用的method，以下从几种情况分析cors使用。

GET跨域请求

• 前端代码

  fetch('http://localhost:6888/test_get',{
      method: 'GET',
      mode: 'cors',
  }).then(res => {
      return res.json();
  }).then(json => {
      console.log('获取的结果', json.data);
      return json;
  }).catch(err => {
      console.log('请求错误', err);
  })
  

• 后端代码相关配置

  c.Header("Access-Control-Allow-Origin", "*")
  c.Header("Access-Control-Allow-Methods", "GET, POST")
  

• 响应(response)头部特殊部分

  [图片上传失败...(image-c40006-1549423559494)]

POST跨域请求

• 前端代码

  fetch('http://localhost:6888/test_post',{
      method: 'POST',
      body: JSON.stringify({name: 'zaozuo'}),
      mode: 'cors',
  }).then(res => {
      return res.json();
  }).then(json => {
      console.log('获取的结果', json.data);
      return json;
  }).catch(err => {
      console.log('请求错误', err);
  })
  

• 后端代码同get相同

• 响应(response)头部特殊部分同get相同

PUT跨域请求

• 前端代码

  fetch('http://localhost:6888/test_put',{
      method: 'PUT',
      body: JSON.stringify({name: 'zaozuo'}),
      mode: 'cors',
  }).then(res => {
      return res.json();
  }).then(json => {
      console.log('获取的结果', json.data);
      return json;
  }).catch(err => {
      console.log('请求错误', err);
  })
  

• 后端代码同get、post相同

• 请求(request)头部特殊部分
  [图片上传失败...(image-2a3378-1549423559494)]

• 响应(response)头部特殊部分

[图片上传失败...(image-e313b8-1549423559495)]

• 不同于get、post请求的地方是请求有个预检查（OPTIONS请求），然后再发put请求；上面的头部信息都是options请求相关的，put请求跟平时普通http请求一样。

思考

1. 同是跨域请求，为什么put有预检查，而get和post都没有
2. 上面提到的跨域头部信息的值都是干什么的，还有没有其他特殊头可能用到

问题一

跨域请求分简单请求和非简单请求，简单请求跨域只发送一个请求，不会发送options请求进行预检查，而非简单请求有预检查，那什么是简单请求，什么又是非简单请求呢。

• 简单请求（满足以下一种情况即可）

1. 请求method是get、head或者post
2. 除了用户代理自动设置的一些头部，开发工程师手动设置的头部是如下头部之一：
   Accept
   Accept-Language
   Content-Language
   Content-Type
   Last-Event-ID
   DPR
   Save-Data
   Viewport-Width
   Width
3. content-type是application/x-www-form-urlencoded、 multipart/form-data或者text/plain
4. 没有事件注册到XMLHttpRequestUpload上
5. 在请求时没有使用ReadableStream

• 非简单请求
  不是简单请求，就是非简单请求喽。

问题二

• request跨域头部介绍

  • Access-Control-Allow-Origin：可以允许哪些客户端来访问，指可以是*，也可以是某个域名或者用逗号隔开的域名列表。
  • Access-Control-Expose-Headers： 浏览器可以访问的一些头部。
  • Access-Control-Max-Age：预检查结果可以缓存的问题
  • Access-Control-Allow-Methods：指定客户端发请求可以使用的方法
  • Access-Control-Allow-Headers：指定客户端发请求可以使用的头部。
  • Access-Control-Allow-Credentials: 指定客户端是否可以携带cookie等认证信息(前端fetch设置withCredentials：true进行发送cookie),如果是简单请求等跨域得确保此response头设置为true。

• response头部

  • Access-Control-Allow-Origin：可以允许哪些客户端来访问，指可以是*，也可以是某个域名或者用逗号隔开的域名列表。
  • Access-Control-Expose-Headers： 浏览器可以访问的一些头部。
  • Access-Control-Max-Age：预检查结果可以缓存的问题
  • Access-Control-Allow-Methods：指定客户端发请求可以使用的方法
  • Access-Control-Allow-Headers：指定客户端发请求可以使用的头部。
  • Access-Control-Allow-Credentials: 指定客户端是否可以携带cookie等认证信息(前端fetch设置withCredentials：true进行发送cookie),如果是简单请求等跨域得确保此response头设置为true。

总结

以上提到的头部信息，大部分只在预检查部分出现。