前言
在現代Web開發中,跨域資源共享(Cross-Origin Resource Sharing,簡稱CORS)是一項關鍵技術,它允許瀏覽器在不同源之間安全地執行Ajax請求。當一個來自不同源的請求涉及到一些特殊 HTTP 頭部或者方法時,瀏覽器會先發送一個稱為“預檢請求”(Preflight Request)的OPTIONS請求以確認服務器是否允許這樣的實際請求。本文將詳細介紹預檢請求的工作原理、應用場景以及相關配置。
什么是預檢請求?
預檢請求 是在正式發送實際跨域請求之前,瀏覽器向目標服務器發起的一個預先詢問的請求。這是瀏覽器對于復雜CORS請求的一種安全機制,確保實際請求不會違反同源策略而被拒絕。
預檢請求觸發條件:
- 請求方法不是
GET
,HEAD
或POST
。 - 請求包含了自定義的頭部信息(如:Authorization、Content-Type等非簡單頭部字段)且值不在簡單頭部列表內。
- 請求中的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機制中的重要組成部分,它為跨域請求的安全性提供了保障。理解并正確配置預檢請求,能幫助我們更好地解決前后端分離架構下的跨域問題,實現高效安全的數據交互。