码迷,mamicode.com
首页 > 编程语言 > 详细

【Javascript-ECMA6-Fetch详解】

时间:2018-10-13 13:45:44      阅读:323      评论:0      收藏:0      [点我收藏+]

标签:模式   audit   data   source   ISE   mis   repo   multipart   javascrip   

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详解】

标签:模式   audit   data   source   ISE   mis   repo   multipart   javascrip   

原文地址:https://www.cnblogs.com/wanxiong/p/js-ecma6-fetch.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!