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

文章目录 1. 引言2. 理解 CORS2.1 CORS 基本概念2.2 同源策略与跨域分类 3. CORS 的核心机制3.1 预检请求（Preflight Request）3.2 简单请求 4. 服务器端配置 CORS4.1 关键响应头4.2 Node.js (Express) 示例4.3 其他后端语言配置 5. 前端处理 CORS 请求5.1 XMLHttpRequest 与 Fetch APIXMLHttpRequest 示例Fetch API 示例 5.2 使用第三方库（axios） 6. 预检请求与非简单请求详解6.1 预检请求的必要性6.2 如何优化预检请求 7. 调试与常见问题7.1 浏览器调试工具7.2 常见错误7.3 调试技巧 8. 性能与安全注意事项8.1 性能优化8.2 安全考量 9. 总结

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 应用在跨域数据交互方面的需求。