请注意，fetch 规范与 jQuery.ajax() 主要有三种方式的不同：

  • 当接收到一个代表错误的 HTTP 状态码时，从 fetch() 返回的 Promise 不会被标记为 reject， 即使响应的 HTTP 状态码是 404 或 500。相反，它会将 Promise 状态标记为 resolve （但是会将 resolve 的返回值的 ok 属性设置为 false ），仅当网络故障时或请求被阻止时，才会标记为 reject。
  • fetch() 不会接受跨域 cookies；你也不能使用 fetch() 建立起跨域会话。其他网站的 [Set-Cookie](https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie) 头部字段将会被无视。

  • fetch 不会发送 cookies。

    完整的fetch

    1. fetch(url, {
    2.   body: JSON.stringify(data), // 数据
    3.   cache: 'no-cache', //缓存 *default, no-cache, reload, force-cache, only-if-cached
    4.   headers: {
    5.     'content-type': 'application/json'//数据格式
    6.   },
    7.   method: 'POST', // *GET, POST, PUT, DELETE, 
    8.   mode: 'cors', // no-cors, cors, *same-origin
    9.   redirect: 'follow', // manual, *follow, error 捕获重定向
    10.   referrer: 'no-referrer', // *client, no-referrer
    11. })
    12. .then(response => response.json()) // JSON

    跨域

  • 协议+域名+端口相同为同源

解决方案

  • JSONP：通过script标签实现，但是只能实现GET请求
  • 代理转发：Webpack 的 dev 模式，配合proxy选项，启动一个前端服务器，实现代理转发
  • CORS：后端允许跨域资源共享