Javascript-ECMA6-Fetch详解

Posted 2021-01-12 wanxiong

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‘字段不能设置为通配符。