在现代 web 开发中，跨域资源共享（CORS）是一个常见且重要的话题。理解 CORS 的机制以及如何正确配置和使用它，对于确保应用程序的安全性和功能性至关重要。本文将重点讨论跨域问题中需要注意的几个关键点，包括不同源域名、请求方法、预检请求和请求头类型。

什么是 CORS？

CORS（Cross-Origin Resource Sharing）是一种机制，它允许网页向不同源（域名、协议或端口）请求资源。浏览器的同源策略限制了在不同源之间的请求，因此 CORS 提供了一种解决方案，使服务器能够明确允许某些跨域请求。

需要注意的关键点

1. 不同源域名

不同源的定义包括以下三部分：

• 协议：如 HTTP 和 HTTPS。
• 域名：如 example.com 和 api.example.com。
• 端口：如 http://example.com:80 和 http://example.com:8080。

如果这三者中的任何一个不同，浏览器将视为跨域请求。开发者需要确保服务器的 CORS 配置允许来自特定源的请求。

2. 请求方法

CORS 支持多种 HTTP 方法，包括：

• 简单请求：GET、POST 和 HEAD 请求不会包含自定义请求头。
• 预检请求：对于 PUT、DELETE 等方法，或当请求包含自定义请求头时，浏览器会先发送一个 OPTIONS 请求，以确认服务器是否允许该请求。

服务器需要在响应中正确设置 Access-Control-Allow-Methods 头，以指定允许的 HTTP 方法。

3. 预检请求

预检请求是浏览器在发送复杂请求之前，先发送一个 OPTIONS 请求，以获取服务器的 CORS 策略。以下是几个关键点：

• 预检请求会询问服务器是否允许特定的请求方法和请求头。
• 服务器需要返回适当的 CORS 头，例如 Access-Control-Allow-Origin 和 Access-Control-Allow-Headers。
• 如果预检请求失败，浏览器将不会发送实际的请求。

4. 请求头类型

请求头分为两类：

• 简单请求头：如 Accept、Content-Type 和 Authorization。这些头不会触发预检请求。
• 自定义请求头：如 X-Custom-Header。如果请求中包含这些头，浏览器会发送预检请求。

服务器需要确保返回以下头信息，以允许特定的请求头：

Access-Control-Allow-Headers: Content-Type, X-Custom-Header

CORS 设置示例

以下是一个使用 Express.js 设置 CORS 的示例：

const express = require('express');
const cors = require('cors');

const app = express();

// 使用 CORS 中间件
app.use(cors({
    origin: 'http://example.com', // 允许的源
    methods: ['GET', 'POST', 'OPTIONS'], // 允许的请求方法
    allowedHeaders: ['Content-Type', 'Authorization'], // 允许的请求头
}));

app.options('/your-endpoint', (req, res) => {
    res.sendStatus(200); // 处理预检请求
});

app.get('/your-endpoint', (req, res) => {
    res.json({ message: 'Hello, world!' });
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

总结

跨域问题的处理需要充分理解不同源的定义、请求方法的使用、预检请求的机制以及请求头的类型。通过正确配置 CORS，您可以确保应用程序安全且功能正常。