Fetch

由于Fetch API是基于Promise设计,因此旧的浏览器并不支持该API,需要引用时引用es6-promise。

基本知识

  • fetch请求返回response格式

    • body

Fetch特性

跨域安全请求头

  • Accept
  • Accept-Language
  • Content-Language
  • Content-Type

跨域安全请求方法

  • GET
  • HEAD
  • POST

禁止用户设置的请求头

  • Accept-Charset
  • Accept-Encoding
  • Access-Control-Request-Headers
  • Access-Control-Request-Method
  • Connection
  • Content-Length
  • Cookie
  • Cookie2
  • Date
  • DNT
  • Expect
  • Host
  • Keep-Alive
  • Origin
  • Referer
  • TE
  • Trailer
  • Transfer-Encoding
  • Upgrade
  • Via

在请求中设置任何一个以上请求头时,浏览器会报错

index.html:16 Refused to set unsafe header "Accept-Encoding"

也就是说,这些属性只能被浏览器控制。

mode

可选值:

-same-origin

只能同域名内访问。

-no-cors

no-cors模式下,heades基本不可修改,只有部分字段支持修改

1.Accept

2.Accept-Language

3.Content-Language

4.Content-Type只能设置为application/x-www-form-urlencoded,multipart/form-data和text-plain中的任意一种。

no-cors模式下,限制使用GET,HEAD,POST方法。

-cors

credentials

  • omit(默认值)
  • include
  • same-origin

fetch不同浏览器的实现

  • Safari

safari在6.1+版本里,通过window.fetch内置实现了fetch。

关于CORS(Cross-Origin Resource Share)

跨域简单请求

当请求仅包含以下几种情况时属于简单请求,浏览器不会下发预请求:

  • GET
  • HEAD
  • POST
  • Accept
  • Accept-Language
  • Content-Language
  • Content-Type(值为applica/x-www-form-urlencoded, multipart/form-data, text/plain)

跨域预请求

除跨域简单请求外的任何请求,客户端默认发送options预请求。

例外

针对以下非简单请求所属content-type可选值,服务端允许不通过预请求直接访问:

  • application/csp-report
  • application/report
  • application/expect-ct-report+json
  • application/xss-auditor-report
  • application/ocsp-request

其他注意事项

  • 跨域请求一定包含Origin字段,然而包含Origin字段的不一定是跨域请求,可能是除GET和HEAD之外的其他请求。
  • 服务器建议使用403状态拒绝客户端预请求。
  • credentials值为'include'时,'`Access-Control-Allow-Origin'字段不能设置为通配符。

【Javascript-ECMA6-Fetch详解】的更多相关文章

  1. 从mixin到new和prototype:Javascript原型机制详解

    从mixin到new和prototype:Javascript原型机制详解   这是一篇markdown格式的文章,更好的阅读体验请访问我的github,移动端请访问我的博客 继承是为了实现方法的复用 ...

  2. JavaScript严格模式详解

    转载自阮一峰的博客 Javascript 严格模式详解   作者: 阮一峰 一.概述 除了正常运行模式,ECMAscript 5添加了第二种运行模式:"严格模式"(strict m ...

  3. [转]javascript console 函数详解 js开发调试的利器

    javascript console 函数详解 js开发调试的利器   分步阅读 Console 是用于显示 JS和 DOM 对象信息的单独窗口.并且向 JS 中注入1个 console 对象,使用该 ...

  4. javascript 节点属性详解

    javascript 节点属性详解 根据 DOM,html 文档中的每个成分都是一个节点 DOM 是这样规定的:整个文档是一个文档节点每个 html 标签是一个元素节点包含在于 html 元素中的文本 ...

  5. (" use strict")Javascript 严格模式详解

    Javascript 严格模式详解 转载别人的博客内容,浏览了一遍,没有全部吸收,先保存一下链接 http://www.ruanyifeng.com/blog/2013/01/javascript_s ...

  6. 【HANA系列】SAP HANA XS使用JavaScript数据交互详解

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA XS使用Jav ...

  7. JavaScript运行机制详解

    JavaScript运行机制详解   var test = function(){ alert("test"); } var test2 = function(){ alert(& ...

  8. [转]JavaScript异步机制详解

    原文: https://www.jianshu.com/p/4ea4ee713ead --------------------------------------------------------- ...

  9. js课程 1-3 Javascript变量类型详解

    js课程 1-3  Javascript变量类型详解 一.总结 一句话总结:js对象点(属性方法),json对象冒号(属性方法).属性和方法区别只有一个括号. 1.json对象中的函数的使用? 函数名 ...

  10. JavaScript数组方法详解

    JavaScript数组方法详解 JavaScript中数组的方法种类众多,在ES3-ES7不同版本时期都有新方法:并且数组的方法还有原型方法和从object继承的方法,这里我们只介绍数组在每个版本中 ...

随机推荐

  1. PAT 1044. Shopping in Mars

    #include <cstdio> #include <cstdlib> #include <vector> #include <climits> #i ...

  2. K2P刷机教程转自恩山磨人的小妖精

    K2P刷机指南说明 K2P MTK版发布之初用的是22.5.7.85, 这个版本官改和高恪K2P固件都可以从斐讯固件基础上直接升级, 是所谓直刷.但好景不长, 之后的版本比如22.5.17.33就改了 ...

  3. JavaScript this指向相关内容

    1,默认绑定this指向windw对象 看代码: function test(C){ var a = 123 function b(){}; } 在预编译环节当中. OA{ arguments:[1] ...

  4. Tjoi2016&Heoi2016 字符串

    传送门 另一个传送门 终于把心头大恨切掉了……后缀自动机大法好,从此抛弃后缀数组哈哈……(说的跟你会写后缀数组似的 好像网上的题解大多都是后缀数组?看了看表示理解不能,那我这份后缀自动机的题解就写详细 ...

  5. 类型同时存在于A.dll和B.dll中的解决办法

    引用B.dll后,右键引用中的B.dll属性->别名->Test using的最前面加上 extern alias Test; 使用 Test.MyClass.DoSth();

  6. iview框架下,modal内容过长,select选项位置不对

    问题 modal组件中内容过长,超过一屏,有滚动条后,里面包含的select组件选项内容,位置会不对 解决 在使用select的时候添加transfer属性

  7. DUANG~ 万网轻云服务器,大促狂欢,不仅仅免单!

    DUANG~ 万网轻云服务器,大促狂欢,不仅仅免单!   当老板第一次知道我们要做活动的时候,其实是拒绝的.DUANG~ 打折.降价.挥泪甩卖…太俗套.客户看到一定骂我们,根本没有诚意. 所以轻云大促 ...

  8. Sqlite 数据库分页查询(ListView分页显示数据)

    下面介绍一下我的这个demo. 流程简述: 我在raw文件夹下面放了名称为city的数据库,里面包含全国2330个城市,以及所属省,拼音简写等信息. 首先 在进入MainActivity的时候,创建数 ...

  9. Netty入门1之----认识Netty

      Netty 什么是Netty? Netty 是一个利用 Java 的高级网络的能力,隐藏其背后的复杂性而提供一个易于使用的 API 的客户端/服务器框架. Netty 是一个广泛使用的 Java ...

  10. ubuntu下root不能复制 abc用户下的软连接文件

    使用root用户去复制,提示权限不足: 那么这个软连接是个什么东西??