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. freemarker生成word,表格分页

    在做项目的过程中,使用到了freemarker生成word.又有一个需求,明细的要确定有多少页,这就用到了换页的xml标签了,找了我好久 <w:p ><w:r><w:br ...

  2. PHP 八种基本的数据类型

    四种标量类型: boolean (布尔型) integer (整型) float (浮点型, 也称作 double) string (字符串) 两种复合类型: array (数组) object (对 ...

  3. 不同浏览器下word-wrap,word-break,white-space强制换行和不换行总结

    强制换行与强制不换行用到的属性 我们一般控制换行所用到的CSS属性一共有三个:word-wrap; word-break; white-space.这三个属性可以说是专为了文字断行而创造出来的.首先我 ...

  4. sql: T-SQL 统计计算(父子關係,樹形,分級分類的統計)

    ---sql: T-SQL 统计计算(父子關係,樹形,分級分類的統計) ---2014-08-26 塗聚文(Geovin Du) CREATE PROCEDURE proc_Select_BookKi ...

  5. mui.ajax()和asp.net sql服务器数据交互【3】最终版

    1.前端页面 <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-ic ...

  6. Tesseract-OCR -01-Tesseract 介绍

    Tesseract-OCR -01-Tesseract 介绍 OCR(Optical Character Recognition): 光学字符识别,是指对图片文件中的文字进行分析识别,获取的过程 Te ...

  7. Android菜单(动画菜单、360波纹菜单)

     Android菜单(动画菜单.360波纹菜单) 前言:Android菜单常用集合:FragmentTabHost系统菜单.上移式菜单.360波纹菜单.展开式菜单.详解注释,可直接拿来用! 效果:   ...

  8. 记重回IT行业的面试

    问点: 0,梳理一个前端知识框架 1,jQuery的理解 2,仿某网站首页,除了download,显示新优化地方 3,文档模型(DOM) 事件流 事件处理程序 事件类型 例如阻止冒泡的方法 4,前端跟 ...

  9. windows远程桌面无法粘贴复制的解决方法

    案例一:未勾选剪贴板,进入 远程桌面连接选项“本地资源->本地设备和资源->剪贴板”中,勾选剪贴板. 案例二:已勾选剪贴板,但是无法粘贴复制,进入远程服务器,关闭[rdpclip.exe] ...

  10. CentOS7 安装tomcat为系统服务器 Systemctl管理Tomcat,并设置开机启动

    本文转载:http://blog.chinaunix.net/uid-24648266-id-5729891.html CentOS7开始,从/etc/init.d脚本改为了systemctl管理服务 ...