【Javascript-ECMA6-Fetch详解】
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详解】的更多相关文章
- 从mixin到new和prototype:Javascript原型机制详解
从mixin到new和prototype:Javascript原型机制详解 这是一篇markdown格式的文章,更好的阅读体验请访问我的github,移动端请访问我的博客 继承是为了实现方法的复用 ...
- JavaScript严格模式详解
转载自阮一峰的博客 Javascript 严格模式详解 作者: 阮一峰 一.概述 除了正常运行模式,ECMAscript 5添加了第二种运行模式:"严格模式"(strict m ...
- [转]javascript console 函数详解 js开发调试的利器
javascript console 函数详解 js开发调试的利器 分步阅读 Console 是用于显示 JS和 DOM 对象信息的单独窗口.并且向 JS 中注入1个 console 对象,使用该 ...
- javascript 节点属性详解
javascript 节点属性详解 根据 DOM,html 文档中的每个成分都是一个节点 DOM 是这样规定的:整个文档是一个文档节点每个 html 标签是一个元素节点包含在于 html 元素中的文本 ...
- (" use strict")Javascript 严格模式详解
Javascript 严格模式详解 转载别人的博客内容,浏览了一遍,没有全部吸收,先保存一下链接 http://www.ruanyifeng.com/blog/2013/01/javascript_s ...
- 【HANA系列】SAP HANA XS使用JavaScript数据交互详解
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA XS使用Jav ...
- JavaScript运行机制详解
JavaScript运行机制详解 var test = function(){ alert("test"); } var test2 = function(){ alert(& ...
- [转]JavaScript异步机制详解
原文: https://www.jianshu.com/p/4ea4ee713ead --------------------------------------------------------- ...
- js课程 1-3 Javascript变量类型详解
js课程 1-3 Javascript变量类型详解 一.总结 一句话总结:js对象点(属性方法),json对象冒号(属性方法).属性和方法区别只有一个括号. 1.json对象中的函数的使用? 函数名 ...
- JavaScript数组方法详解
JavaScript数组方法详解 JavaScript中数组的方法种类众多,在ES3-ES7不同版本时期都有新方法:并且数组的方法还有原型方法和从object继承的方法,这里我们只介绍数组在每个版本中 ...
随机推荐
- PAT 1044. Shopping in Mars
#include <cstdio> #include <cstdlib> #include <vector> #include <climits> #i ...
- K2P刷机教程转自恩山磨人的小妖精
K2P刷机指南说明 K2P MTK版发布之初用的是22.5.7.85, 这个版本官改和高恪K2P固件都可以从斐讯固件基础上直接升级, 是所谓直刷.但好景不长, 之后的版本比如22.5.17.33就改了 ...
- JavaScript this指向相关内容
1,默认绑定this指向windw对象 看代码: function test(C){ var a = 123 function b(){}; } 在预编译环节当中. OA{ arguments:[1] ...
- Tjoi2016&Heoi2016 字符串
传送门 另一个传送门 终于把心头大恨切掉了……后缀自动机大法好,从此抛弃后缀数组哈哈……(说的跟你会写后缀数组似的 好像网上的题解大多都是后缀数组?看了看表示理解不能,那我这份后缀自动机的题解就写详细 ...
- 类型同时存在于A.dll和B.dll中的解决办法
引用B.dll后,右键引用中的B.dll属性->别名->Test using的最前面加上 extern alias Test; 使用 Test.MyClass.DoSth();
- iview框架下,modal内容过长,select选项位置不对
问题 modal组件中内容过长,超过一屏,有滚动条后,里面包含的select组件选项内容,位置会不对 解决 在使用select的时候添加transfer属性
- DUANG~ 万网轻云服务器,大促狂欢,不仅仅免单!
DUANG~ 万网轻云服务器,大促狂欢,不仅仅免单! 当老板第一次知道我们要做活动的时候,其实是拒绝的.DUANG~ 打折.降价.挥泪甩卖…太俗套.客户看到一定骂我们,根本没有诚意. 所以轻云大促 ...
- Sqlite 数据库分页查询(ListView分页显示数据)
下面介绍一下我的这个demo. 流程简述: 我在raw文件夹下面放了名称为city的数据库,里面包含全国2330个城市,以及所属省,拼音简写等信息. 首先 在进入MainActivity的时候,创建数 ...
- Netty入门1之----认识Netty
Netty 什么是Netty? Netty 是一个利用 Java 的高级网络的能力,隐藏其背后的复杂性而提供一个易于使用的 API 的客户端/服务器框架. Netty 是一个广泛使用的 Java ...
- ubuntu下root不能复制 abc用户下的软连接文件
使用root用户去复制,提示权限不足: 那么这个软连接是个什么东西??