前言

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

什么是預檢請求？

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

預檢請求觸發條件：

1. 請求方法不是GET, HEAD或POST。
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機制中的重要組成部分，它為跨域請求的安全性提供了保障。理解并正確配置預檢請求，能幫助我們更好地解決前后端分離架構下的跨域問題，實現高效安全的數據交互。