深入浅出HTTP/2预检请求（CORS Preflight Request）

前言

在现代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']
}));

// 其他路由和中间件配置...
1
2
3
4
5
6
7
8
9
10
11
12

通过以上配置，服务器已经明确表示接受来自http://example.com的跨域请求，并允许使用指定的方法和头部。

总结

预检请求是CORS机制中的重要组成部分，它为跨域请求的安全性提供了保障。理解并正确配置预检请求，能帮助我们更好地解决前后端分离架构下的跨域问题，实现高效安全的数据交互。