成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

Fetch&CORS的簡單實驗

Zack / 3469人閱讀

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

概念

CORS, Cross-origin resource sharing

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

Fetch

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

均摘自中文MDN

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

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

const http = require("http")

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

用瀏覽器打開http://localhost:3210，觀察到返回值

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

嗯，意料之中的情形。

簡單請求(Simple requests)

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

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

再此發(fā)送請求

嗯，意料之中的情形。這便完成了一次跨域請求。專業(yè)的說，完成了一次簡單請求。何為簡單請求？

使用下列方法之一：

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)格，再來看看Network

怎么無端出來個 OPTIONS 請求？

預(yù)檢請求(Preflighted requests)

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

所以修改服務(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ā)送一次請求

嗯，沒毛病

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

而 Access-Control-Max-Age 則指定了預(yù)檢請求的結(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ī)定了哪些源站通過哪些方式有權(quán)限訪問哪些資源

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

參考文檔

HTTP訪問控制（CORS）

使用 Fetch

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/92172.html

相關(guān)文章

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

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

    Jason_Geng 評論0 收藏0

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

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

    ZoomQuiet 評論0 收藏0

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

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

    MrZONT 評論0 收藏0

  • 基于 HTTP 請求攔截，快速解決跨域和代理 Mock

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

    dreamGong 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<