深入淺出HTTP/2預檢請求(CORS Preflight Request)

前言

在現代Web開發中,跨域資源共享(Cross-Origin Resource Sharing,簡稱CORS)是一項關鍵技術,它允許瀏覽器在不同源之間安全地執行Ajax請求。當一個來自不同源的請求涉及到一些特殊 HTTP 頭部或者方法時,瀏覽器會先發送一個稱為“預檢請求”(Preflight Request)的OPTIONS請求以確認服務器是否允許這樣的實際請求。本文將詳細介紹預檢請求的工作原理、應用場景以及相關配置。

什么是預檢請求?

預檢請求 是在正式發送實際跨域請求之前,瀏覽器向目標服務器發起的一個預先詢問的請求。這是瀏覽器對于復雜CORS請求的一種安全機制,確保實際請求不會違反同源策略而被拒絕。

預檢請求觸發條件:
  1. 請求方法不是GET, HEADPOST
  2. 請求包含了自定義的頭部信息(如:Authorization、Content-Type等非簡單頭部字段)且值不在簡單頭部列表內。
  3. 請求中的Content-Type并非下列之一:
    • application/x-www-form-urlencoded
    • multipart/form-data
    • text/plain

預檢請求過程詳解

  • 步驟1: 當滿足上述條件時,瀏覽器首先發送一個OPTIONS方法的預檢請求到服務器,該請求包含以下信息:

    • Origin:當前請求頁面的源地址。
    • Access-Control-Request-Method:即將要發送的實際請求的方法類型(例如PUT, DELETE等)。
    • Access-Control-Request-Headers:即將要發送的實際請求中的自定義請求頭。
  • 步驟2: 服務器接收到這個預檢請求后,根據其內部的CORS策略進行判斷,并在響應中指定允許的方法和頭部信息。例如,返回如下響應頭:

    • Access-Control-Allow-Origin:允許訪問的源地址。
    • Access-Control-Allow-Methods:允許的方法列表,例如 GET, POST, PUT, DELETE 等。
    • Access-Control-Allow-Headers:允許的自定義頭部列表,例如 Authorization, Content-Type 等。
  • 步驟3: 瀏覽器收到預檢請求成功的響應后,才會繼續發出實際的請求。

如何配置預檢請求?

在服務器端,需要設置合適的響應頭來允許特定來源和特定類型的預檢請求。以Express.js框架為例,可以使用cors中間件來進行配置:

var express = require('express');
var cors = require('cors');var app = express();app.use(cors({origin: 'http://example.com',methods: ['GET', 'POST', 'PUT', 'DELETE'],allowedHeaders: ['Content-Type', 'Authorization']
}));// 其他路由和中間件配置...

通過以上配置,服務器已經明確表示接受來自http://example.com的跨域請求,并允許使用指定的方法和頭部。

總結

預檢請求是CORS機制中的重要組成部分,它為跨域請求的安全性提供了保障。理解并正確配置預檢請求,能幫助我們更好地解決前后端分離架構下的跨域問題,實現高效安全的數據交互。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/717633.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/717633.shtml
英文地址,請注明出處:http://en.pswp.cn/news/717633.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

23端口登錄的Telnet命令+傳輸協議FTP命令

一、23端口登錄的Telnet命令 Telnet是傳輸控制協議/互聯網協議(TCP/IP)網絡(如Internet)的登錄和仿真程序,主要用于Internet會話。基本功能是允許用戶登錄進入遠程主機程序。 常用的Telnet命令 Telnet命令的格式為&…

有人吐槽:可視化大屏面向領導的設計,真相是這樣嗎?

某些老鐵的態度很極端,看到可視化大屏頁面就一口斷定,除了討好領導之外,屁用沒有。真相是這樣嗎?貝格前端工場嘗試給老鐵們分析下。 一、可視化大屏確實要面向領導,但不是討好領導 可視化大屏的設計需要考慮領導和管理…

整理的一些腦模板及節點的名稱

整理的一些腦模板及節點的名稱 前言模板簡介AAL90模板HOA112 模板 前言 自己看論文找的,因為有些數據集網站的確有點難找到模板的名稱等等。所以主要是看一些論文,因為有文獻,所以更有保障一些。當然也有一些在數據網站上比較容易找到所以一…

社交軟件----

story feed(聚合服務) 查 聯表查詢 表冗余字段java拼接user_service查詢用戶的avator和nick_namefollow_service查詢我是否關注item_service查詢我的in_box in_box如何設計redis zset 關注 數據庫設計 MySQL 根據ER圖設計表 create table follow(id bigint unsigned n…

小興教你做平衡小車-stm32程序開發(按鍵掃描)

文章目錄 1 單片機最小系統板按鍵原理圖介紹2 庫函數程序設計3 寄存器程序設計4 效果展示 1 單片機最小系統板按鍵原理圖介紹 從圖中看出單片機的PB12引腳接到了按鍵上。 根據按鍵的原理圖,可以分析得到,如果不按下按鍵的時候,引腳輸入的是…

【Linux】frp內網穿透詳細教程(簡單易懂)

frp內網穿透詳細教程(簡單易懂) 文章目錄 frp內網穿透詳細教程(簡單易懂)frp是什么?工作原理準備工作frp工具的使用第一步:下載安裝包第二步:公網部署frps第三步:內網部署frpc第四步…

適配華為“純血鴻蒙”,抖音開始招聘相關人才

目前,字節跳動上線了“大前端高級開發工程師”一職,開始招聘鴻蒙人才。 根據職位描述,該崗位負責抖音大前端基礎工程與架構設計,以及抖音大前端基礎設施建設。 該職位需要有前端工程化經驗,熟悉JavaScript/TypeScrip…

關于BT站

BT站,全稱BitTorrent站點,是一種基于BitTorrent協議的P2P(點對點)文件共享網站。BitTorrent是一種分布式文件共享協議,允許用戶直接在彼此之間傳輸文件,而不需要依賴于中央服務器。BT站提供種子文件&#x…

斐波那契數列模型---使用最小花費爬樓梯

746. 使用最小花費爬樓梯 - 力扣(LeetCode) 1、狀態表示: 題目意思即:cost[i]代表從第i層向上爬1階或者2階,需要花費多少力氣。如cost[0],代表從第0階爬到第1階或者第2階需要cost[0]的力氣。 一共有cost.…

springboot/ssm學院個人信息管理系統Java高校課程作業管理系統web

springboot/ssm學院個人信息管理系統Java高校課程作業管理系統web 基于springboot(可改ssm)vue項目 開發語言:Java 框架:springboot/可改ssm vue JDK版本:JDK1.8(或11) 服務器:tomcat 數據庫&#xf…

編寫高質量Python (第35條) 不要通過 throw 變換生成器狀態

第 35 條 不要通過 throw 變換生成器狀態 ? 除 yield from 表達式(參見 第 33 條) 與 send 方法(參見 第 34 條)外,生成器還有一個高級功能,就是可以把調用者通過 throw 方法傳過來的 Exception 實例重新拋出。這個 throw 方法用…

Vue 3 中的 Teleport 特性詳解

引言 在 Vue 3 中,引入了一個名為 Teleport 的新特性。這個特性允許開發者將組件的子組件“傳送”到 DOM 中的任意位置,而不僅僅是它們的直接父級內部。這一功能在處理如模態框、彈出菜單、提示框等需要從其原始位置在視覺上移動到其他地方的用戶界面元…

Spring Boot與Spring Boot MVC:構建現代化Web應用的利器

Spring Boot與Spring Boot MVC:構建現代化Web應用的利器 在當今的軟件開發領域,特別是在Java生態系統中,Spring框架已經成為構建企業級應用程序的首選。而在Spring的眾多子項目中,Spring Boot和Spring MVC是兩個非常重要的組成部…

C++_數據類型_字符串型

作用 用于表示一串字符 兩種風格 C風格字符串&#xff1a;char 變量名[] "字符串值” 示例 注意 C風格的字符串要用雙括號括起來 C風格字符串&#xff1a;string 變量名 "字符串值” 注意 用C風格字符串的時候&#xff0c;要包含這個頭文件#include <st…

PostgreSQL常用SQL語句

文章目錄 PostgreSQL常用SQL語句免密交互增刪改查備份恢復數據遷移用戶管理權限管理進程管理查詢優化PostgreSQL常用SQL語句 PostgreSQL部署,參見PostgreSQL部署與配置 免密交互 命令行執行SQL語句或備份、恢復時,有以下兩種方式 1.交互式

【比較mybatis、lazy、sqltoy、lambda、操作數據 】操作批量新增、分頁查詢【一】

orm框架使用Lambda性能比較 環境&#xff1a; idea jdk17 spring boot 3.0.7 mysql 8.0測試條件常規對象 orm 框架是否支持xml是否支持 Lambda對比版本mybatis????3.5.4sqltoy????5.2.98lazy????1.2.3-JDK17 數據庫表(含有唯一性索引s_u) CREATE TABLE sys_u…

吳恩達機器學習-可選實驗室-梯度下降-Gradient Descent for Linear Regression

文章目錄 目標工具問題陳述計算損失梯度下降總結執行梯度下降梯度下降法成本與梯度下降的迭代預測繪制祝賀 目標 在本實驗中&#xff0c;你將:使用梯度下降自動化優化w和b的過程 工具 在本實驗中&#xff0c;我們將使用: NumPy&#xff0c;一個流行的科學計算庫Matplotlib&…

【茶話數據結構】查找最短路徑——Dijkstra算法詳解(保姆式詳細圖解,步步緊逼,保你學會)

&#x1f4af; 博客內容&#xff1a;【茶話數據結構】查找最短路徑——Dijkstra算法詳解 &#x1f600; 作??者&#xff1a;陳大大陳 &#x1f989;所屬專欄&#xff1a;數據結構筆記 &#x1f680; 個人簡介&#xff1a;一個正在努力學技術的準前端&#xff0c;專注基礎和實…

【學習心得】為Django項目創建專用MySQL用戶并賦予權限

一、問題描述 也許你在本地開發Django項目的時候不會關心&#xff0c;項目A所用的MySQL數據庫能否被項目B訪問。但若你使用的公司服務器or學校服務器&#xff0c;這種情況下很多人共用一個MySQL&#xff0c;你就會擔心別人或別的項目胡亂訪問你正在開發的項目所使用的數據庫。這…