Fetch&CORS的簡單實驗

Zack 發布于2019-08-22 11:19 / 3403人閱讀

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

概念

CORS, Cross-origin resource sharing

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

Fetch

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

均摘自中文MDN

實驗 實驗環境搭建 服務端

在本地搭建一個服務，返回一個 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 的網站，例如華為

嗯，意料之中的情形。

簡單請求(Simple requests)

修改服務端代碼，添加 Access-Control-Allow-Origin

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

再此發送請求

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

使用下列方法之一：

GET

HEAD

POST

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

Accept-Language

Content-Language

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

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

text/plain

Multipart/form-data

Application/x-www-form-urlencoded

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

哈？還挺嚴格，再來看看Network

怎么無端出來個 OPTIONS 請求？

預檢請求(Preflighted requests)

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

所以修改服務端代碼，讓它允許自定義頭部 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)

重新發送一次請求

嗯，沒毛病

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

而 Access-Control-Max-Age 則指定了預檢請求的結果能夠被緩存多久

小結

Access-Control-Allow-Origin, Access-Control-Expose-Headers, Access-Control-Max-Age, Access-Control-Allow-Credentials, Access-Control-Allow-Methods, Access-Control-Allow-Headers 這一系列的相應首部字段規定了哪些源站通過哪些方式有權限訪問哪些資源

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

參考文檔

HTTP訪問控制（CORS）

使用 Fetch

云服務器 GPU云服務器 fetch和axios的區別免費的實驗室服務器的管理實驗實驗數據的統計分析

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92172.html

常用跨域方法總結（2）——CORS

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

Jason_Geng 2019-08-22 18:19 評論0 收藏0
常用跨域方法總結（2）——CORS

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

ZoomQuiet 2019-08-02 10:47 評論0 收藏0
常用跨域方法總結（2）——CORS

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

MrZONT 2019-08-30 15:53 評論0 收藏0
基于 HTTP 請求攔截，快速解決跨域和代理 Mock

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

dreamGong 2019-08-26 13:36 評論0 收藏0