如何解决跨域请求的问题（CORS）？

1. 引言

在前后端分离的开发模式中，跨域请求问题是常见的挑战。浏览器的同源策略限制了不同域、协议或端口之间的 AJAX 调用，防止恶意脚本获取敏感信息。但随着应用的复杂化，前端常需要调用第三方接口或分离静态资源，此时就必须通过合理的跨域解决方案来实现数据交互。跨域资源共享（CORS）正是为此而设计的安全机制，它允许服务器在响应中指定哪些来源可以访问资源，从而安全地打破同源限制。

2. 理解 CORS

2.1 CORS 基本概念

CORS（Cross-Origin Resource Sharing）是一种 W3C 标准，允许浏览器在发起跨域 AJAX 请求时，依据服务器返回的 HTTP 头部判断是否允许跨域访问。它使得前端使用常规的 XMLHttpRequest 或 Fetch API 调用不同域的接口时不再受同源策略的严格限制。

2.2 同源策略与跨域分类

同源策略要求请求的协议、域名和端口都必须一致。只要任意一项不同，浏览器就会认为是跨域。跨域请求大致可分为：

• 简单请求：满足 GET、HEAD、POST（仅限特定 Content-Type）条件的请求，无需预检。
• 非简单请求：如 PUT、DELETE 或带自定义头部的请求，浏览器会先发送预检（OPTIONS）请求，确认服务器是否允许跨域操作。

3. CORS 的核心机制

3.1 预检请求（Preflight Request）

对于非简单请求，浏览器会在正式请求前先发送一个预检请求：

• 请求方法：OPTIONS
• 关键头部：
  • Origin：标识请求来源。
  • Access-Control-Request-Method：告知服务器即将使用的实际 HTTP 方法。
  • Access-Control-Request-Headers：列出将要发送的自定义头部字段。

服务器响应预检请求时，会返回：

• Access-Control-Allow-Origin：允许访问的来源。
• Access-Control-Allow-Methods：允许的请求方法列表。
• Access-Control-Allow-Headers：允许的请求头部字段。
• Access-Control-Max-Age：预检请求结果的缓存时间，减少重复预检请求的频率。

3.2 简单请求

对于 GET、HEAD 和某些 POST 请求，浏览器直接附加 Origin 头发送请求，服务器在响应中添加 CORS 相关字段即可，无需预检。

4. 服务器端配置 CORS

4.1 关键响应头

服务器需要在响应头中添加以下字段：

• Access-Control-Allow-Origin
  指定允许跨域访问的域名，可设置为特定域（如 http://localhost:3000）或 *（不适用于带 Cookie 的请求）。
• Access-Control-Allow-Methods
  列出允许的 HTTP 方法，如 GET、POST、PUT、DELETE、OPTIONS 等。
• Access-Control-Allow-Headers
  列出允许的自定义请求头（如 Content-Type, Authorization, X-Requested-With）。
• Access-Control-Allow-Credentials
  指定是否允许跨域请求携带 Cookie，设为 true 时前端必须设置 withCredentials 为 true。
• Access-Control-Max-Age
  指定预检请求的结果缓存时间（单位为秒）。

4.2 Node.js (Express) 示例

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

const allowedOrigins = ['http://localhost:3000', 'http://127.0.0.1:5500'];

app.use((req, res, next) => {
  const origin = req.headers.origin;
  if (allowedOrigins.includes(origin)) {
    // 设置允许的来源
    res.setHeader('Access-Control-Allow-Origin', origin);
    // 允许携带 Cookie
    res.setHeader('Access-Control-Allow-Credentials', 'true');
    // 允许的请求方法
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
    // 允许的请求头
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization, X-Requested-With');
    // 预检请求结果缓存时间，单位秒
    res.setHeader('Access-Control-Max-Age', '86400');
  }
  // 预检请求直接返回
  if (req.method === 'OPTIONS') {
    return res.sendStatus(200);
  }
  next();
});

app.get('/api/data', (req, res) => {
  res.json({ message: '跨域请求成功！' });
});

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

4.3 其他后端语言配置

• Java（Spring Boot）：可使用 @CrossOrigin 注解或配置过滤器设置响应头。
• PHP：在脚本开头添加：

  header("Access-Control-Allow-Origin: http://localhost:3000");
  header("Access-Control-Allow-Credentials: true");
  

• Apache/Nginx：通过配置文件添加 Header set Access-Control-Allow-Origin "http://localhost:3000" 等指令。

5. 前端处理 CORS 请求

5.1 XMLHttpRequest 与 Fetch API

在前端使用原生 AJAX 或 Fetch 进行请求时，可以设置 withCredentials 参数来决定是否携带 Cookie。

XMLHttpRequest 示例

const xhr = new XMLHttpRequest();
xhr.withCredentials = true; // 携带 Cookie
xhr.open('GET', 'http://localhost:8000/api/data', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log('响应数据：', JSON.parse(xhr.responseText));
  }
};
xhr.send();

Fetch API 示例

fetch('http://localhost:8000/api/data', {
  method: 'GET',
  credentials: 'include'  // 携带 Cookie
})
.then(response => response.json())
.then(data => {
  console.log('响应数据：', data);
})
.catch(error => console.error('请求失败：', error));

5.2 使用第三方库（axios）

在 axios 中，全局设置 withCredentials 选项即可：

import axios from 'axios';

axios.defaults.withCredentials = true;

axios.get('http://localhost:8000/api/data')
  .then(response => {
    console.log('响应数据：', response.data);
  })
  .catch(error => {
    console.error('请求失败：', error);
  });

6. 预检请求与非简单请求详解

6.1 预检请求的必要性

对于非简单请求（例如 PUT、DELETE 或使用 JSON 格式发送数据的 POST 请求），浏览器在发送实际请求前会先发送一个 OPTIONS 请求，称为预检请求。这一步骤用于验证：

• 请求方法是否被允许。
• 自定义头部是否被允许。
• 是否允许携带凭证（Cookie）。

6.2 如何优化预检请求

• 缓存预检结果：通过设置 Access-Control-Max-Age，可以让浏览器缓存预检结果，从而减少后续的预检请求次数，提升性能。
• 精简请求头：尽可能减少自定义请求头，确保请求被归为“简单请求”类别，避免额外的预检流程。

7. 调试与常见问题

7.1 浏览器调试工具

• Chrome DevTools：在 Network 面板中查看请求与响应头，确认是否包含正确的 CORS 字段。
• Console 面板：注意控制台中关于 CORS 的错误提示，如“Access-Control-Allow-Origin”未设置或与请求不匹配。

7.2 常见错误

• 使用通配符与凭证冲突：当请求携带 Cookie 时，服务器响应头中的 Access-Control-Allow-Origin 不能使用 *，必须指定具体域名。
• 预检请求失败：检查服务器是否正确响应 OPTIONS 请求，并返回必要的 CORS 头部信息。
• 域名不匹配：确保前端请求的 Origin 与服务器配置的允许域名完全一致（包括协议和端口）。

7.3 调试技巧

• 在服务器端临时放宽 CORS 策略，确认前端请求能够正常响应，然后逐步收紧配置以确保安全性。
• 使用 Postman 等工具模拟跨域请求，验证服务器端配置是否生效。

8. 性能与安全注意事项

8.1 性能优化

• 预检请求缓存：合理设置 Access-Control-Max-Age 能够减少重复的预检请求，提高网络请求性能。
• 减少不必要的跨域请求：在前端项目中，尽量将静态资源和 API 请求统一在同一域下，或者使用代理解决。

8.2 安全考量

• 精细控制访问来源：服务器应严格指定允许访问的域名，而非简单地使用通配符，防止恶意网站发起请求。
• 限制请求方法与头部：根据业务需求，仅允许必要的 HTTP 方法和自定义请求头，降低潜在风险。
• 使用 HTTPS：结合 HTTPS 使用 CORS，可有效防止中间人攻击，确保数据传输安全。

9. 总结

跨域资源共享（CORS）为前后端分离项目提供了安全、灵活的跨域数据访问方式。通过服务器端正确配置关键响应头（如 Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers 及 Access-Control-Allow-Credentials），配合前端适当设置（如 withCredentials），可以实现各种场景下的跨域请求。深入理解简单请求与预检请求的区别，以及调试过程中常见的问题，是确保跨域请求高效且安全的关键。最终，通过性能优化和安全策略的综合应用，CORS 能够有效满足现代 Web 应用在跨域数据交互方面的需求。