成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

Fetch&CORS的簡(jiǎn)單實(shí)驗(yàn)

Zack / 3408人閱讀

摘要：服務(wù)器確認(rèn)允許之后，才發(fā)起實(shí)際的請(qǐng)求。在預(yù)檢請(qǐng)求的返回中，服務(wù)器端也可以通知客戶(hù)端，是否需要攜帶身份憑證包括和認(rèn)證相關(guān)數(shù)據(jù)。提供了一個(gè)接口，用于訪問(wèn)和操縱管道的部分，例如請(qǐng)求和響應(yīng)。專(zhuān)業(yè)的說(shuō)，完成了一次簡(jiǎn)單請(qǐng)求。

概念

CORS, Cross-origin resource sharing

跨域資源共享標(biāo)準(zhǔn)新增了一組 HTTP 首部字段，允許服務(wù)器聲明哪些源站有權(quán)限訪問(wèn)哪些資源。另外，規(guī)范要求，對(duì)那些可能對(duì)服務(wù)器數(shù)據(jù)產(chǎn)生副作用的 HTTP 請(qǐng)求方法（特別是 GET 以外的 HTTP 請(qǐng)求，或者搭配某些 MIME 類(lèi)型的 POST 請(qǐng)求），瀏覽器必須首先使用 OPTIONS 方法發(fā)起一個(gè)預(yù)檢請(qǐng)求（preflight request），從而獲知服務(wù)端是否允許該跨域請(qǐng)求。服務(wù)器確認(rèn)允許之后，才發(fā)起實(shí)際的 HTTP 請(qǐng)求。在預(yù)檢請(qǐng)求的返回中，服務(wù)器端也可以通知客戶(hù)端，是否需要攜帶身份憑證（包括 Cookies 和 HTTP 認(rèn)證相關(guān)數(shù)據(jù)）。

Fetch

Fetch API  提供了一個(gè)  JavaScript 接口，用于訪問(wèn)和操縱 HTTP 管道的部分，例如請(qǐng)求和響應(yīng)。它還提供了一個(gè)全局 fetch() 方法，該方法提供了一種簡(jiǎn)單，合乎邏輯的方式來(lái)跨網(wǎng)絡(luò)異步獲取資源。

均摘自中文MDN

實(shí)驗(yàn) 實(shí)驗(yàn)環(huán)境搭建 服務(wù)端

在本地搭建一個(gè)服務(wù)，返回一個(gè) json ，代碼如下

const http = require("http")

http.createServer((req, res) => {
  res.writeHead(200, {
    "Content-Type": "application/json"
  })
  res.end(JSON.stringify({
    author: "nbb3210"
  }))
}).listen(3210)

用瀏覽器打開(kāi)http://localhost:3210，觀察到返回值

然后再隨便找一個(gè)還是 http 的網(wǎng)站，例如華為

嗯，意料之中的情形。

簡(jiǎn)單請(qǐng)求(Simple requests)

修改服務(wù)端代碼，添加 Access-Control-Allow-Origin

res.writeHead(200, {
    "Access-Control-Allow-Origin": "*",
    "Content-Type": "application/json"
  })

再此發(fā)送請(qǐng)求

嗯，意料之中的情形。這便完成了一次跨域請(qǐng)求。專(zhuān)業(yè)的說(shuō)，完成了一次簡(jiǎn)單請(qǐng)求。何為簡(jiǎn)單請(qǐng)求？

使用下列方法之一：

GET

HEAD

POST

不能設(shè)置除以下集合之外的首部字段:

Accept

Accept-Language

Content-Language

Content-Type （需要額外的限制）

Content-Type 的值近限與下列三者之一

text/plain

Multipart/form-data

Application/x-www-form-urlencoded

所以如果我使用了其他的方法或添加其他的首部字段又如何？

哈？還挺嚴(yán)格，再來(lái)看看Network

怎么無(wú)端出來(lái)個(gè) OPTIONS 請(qǐng)求？

預(yù)檢請(qǐng)求(Preflighted requests)

非簡(jiǎn)單請(qǐng)求就是預(yù)檢請(qǐng)求了，它會(huì)首先使用 OPTIONS 方法發(fā)起一個(gè)預(yù)檢請(qǐng)求到服務(wù)器，以獲取服務(wù)器是否允許該實(shí)際請(qǐng)求。注意了，瀏覽器自己根據(jù)請(qǐng)求是否為簡(jiǎn)單請(qǐng)求來(lái)發(fā)送預(yù)檢請(qǐng)求，不是咱們一般碼農(nóng)自己寫(xiě)的。

所以修改服務(wù)端代碼，讓它允許自定義頭部 Access-Control-Allow-Headers, x-test

const http = require("http")

http.createServer((req, res) => {
  if (res.method === "OPTIONS") {
    res.writeHead(200, {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Headers": "x-test"
    })
    res.end()
  } else {
    res.writeHead(200, {
      "Access-Control-Allow-Origin": "*",
      "Content-Type": "application/json"
    })
    res.end(JSON.stringify({
      author: "nbb3210"
    }))
  }
}).listen(3210)

重新發(fā)送一次請(qǐng)求

嗯，沒(méi)毛病

如果是 DELETE 等其它方法，就用 Access-Control-Allow-Methods

而 Access-Control-Max-Age 則指定了預(yù)檢請(qǐng)求的結(jié)果能夠被緩存多久

小結(jié)

Access-Control-Allow-Origin, Access-Control-Expose-Headers, Access-Control-Max-Age, Access-Control-Allow-Credentials, Access-Control-Allow-Methods, Access-Control-Allow-Headers 這一系列的相應(yīng)首部字段規(guī)定了哪些源站通過(guò)哪些方式有權(quán)限訪問(wèn)哪些資源

Origin, Access-Control-Request-Method, Access-Control-Request-Headers 這一系列請(qǐng)求首部字段無(wú)須手動(dòng)設(shè)置，發(fā)送跨域請(qǐng)求時(shí)，已被自動(dòng)設(shè)置好了

參考文檔

HTTP訪問(wèn)控制（CORS）

使用 Fetch

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/92172.html

相關(guān)文章

  • 常用跨域方法總結(jié)（2）——CORS

    摘要：常用跨域方法總結(jié)上篇文章介紹了幾種常用的跨域方法常用跨域方法總結(jié)，本片為上一篇的補(bǔ)充，對(duì)比較重要的詳細(xì)介紹。出于安全原因，從腳本內(nèi)發(fā)起的跨源請(qǐng)求會(huì)受到一定限制。當(dāng)開(kāi)發(fā)者使用對(duì)象發(fā)起跨域請(qǐng)求時(shí)，它們已經(jīng)被設(shè)置就緒。 常用跨域方法總結(jié)（2）——CORS 上篇文章介紹了幾種常用的跨域方法：常用跨域方法總結(jié)，本片為上一篇的補(bǔ)充，對(duì)比較重要的Cross Origin Resource Shari...

    Jason_Geng 評(píng)論0 收藏0

  • 常用跨域方法總結(jié)（2）——CORS

    摘要：常用跨域方法總結(jié)上篇文章介紹了幾種常用的跨域方法常用跨域方法總結(jié)，本片為上一篇的補(bǔ)充，對(duì)比較重要的詳細(xì)介紹。出于安全原因，從腳本內(nèi)發(fā)起的跨源請(qǐng)求會(huì)受到一定限制。當(dāng)開(kāi)發(fā)者使用對(duì)象發(fā)起跨域請(qǐng)求時(shí)，它們已經(jīng)被設(shè)置就緒。 常用跨域方法總結(jié)（2）——CORS 上篇文章介紹了幾種常用的跨域方法：常用跨域方法總結(jié)，本片為上一篇的補(bǔ)充，對(duì)比較重要的Cross Origin Resource Shari...

    ZoomQuiet 評(píng)論0 收藏0

  • 常用跨域方法總結(jié)（2）——CORS

    摘要：常用跨域方法總結(jié)上篇文章介紹了幾種常用的跨域方法常用跨域方法總結(jié)，本片為上一篇的補(bǔ)充，對(duì)比較重要的詳細(xì)介紹。出于安全原因，從腳本內(nèi)發(fā)起的跨源請(qǐng)求會(huì)受到一定限制。當(dāng)開(kāi)發(fā)者使用對(duì)象發(fā)起跨域請(qǐng)求時(shí)，它們已經(jīng)被設(shè)置就緒。 常用跨域方法總結(jié)（2）——CORS 上篇文章介紹了幾種常用的跨域方法：常用跨域方法總結(jié)，本片為上一篇的補(bǔ)充，對(duì)比較重要的Cross Origin Resource Shari...

    MrZONT 評(píng)論0 收藏0

  • 基于 HTTP 請(qǐng)求攔截，快速解決跨域和代理 Mock

    摘要：今天這篇文章，我們會(huì)介紹幾種常見(jiàn)的方法和其中存在的問(wèn)題，并提出如何基于請(qǐng)求攔截，快速解決跨域和代理問(wèn)題的方案。因?yàn)闆](méi)有修改該請(qǐng)求，只是延遲發(fā)送，這樣就保持了原請(qǐng)求與業(yè)務(wù)服務(wù)器之間的所有鑒權(quán)等相關(guān)信息，由此解決了跨域訪問(wèn)無(wú)法攜帶的問(wèn)題。 近幾年，隨著 Web 開(kāi)發(fā)逐漸成熟，前后端分離的架構(gòu)設(shè)計(jì)越來(lái)越被眾多開(kāi)發(fā)者認(rèn)可，使得前端和后端可以專(zhuān)注各自的職能，降低溝通成本，提高開(kāi)發(fā)效率。 在前后端...

    dreamGong 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<