如何调试跨域问题？

调试跨域问题需结合浏览器开发者工具与服务器端配置，核心步骤如下：

1. 查看控制台（Console）错误信息

   常见错误类型：

   No 'Access-Control-Allow-Origin' header is present：服务器未返回允许跨域的响应头，或值与请求源不匹配。

   The 'Access-Control-Allow-Origin' header contains multiple values：服务器重复配置了该头，或通配符与特定域名混用。

   CORS preflight request failed：预检请求（OPTIONS）失败，通常因服务器未正确处理复杂请求（如PUT、DELETE或自定义头）。

2. 分析网络（Network）标签页

   筛选失败的请求，对比请求头（Request Headers）与响应头（Response Headers）：

   检查Origin（请求源）与Access-Control-Allow-Origin（允许的源）是否匹配。

   预检请求（OPTIONS）的响应头需包含：

   Access-Control-Allow-Methods：允许的HTTP方法（如GET、POST、PUT）。

   Access-Control-Allow-Headers：允许的自定义头（如Authorization、Content-Type）。

1. 关键响应头及其作用

   Access-Control-Allow-Origin：

   允许特定域名：Access-Control-Allow-Origin:

   https://your-frontend.com
   （安全）。

   允许所有源：Access-Control-Allow-Origin: *（调试方便，生产环境慎用，且不可与凭据共存）。

   动态设置：根据请求的Origin头动态返回白名单内的域名。

   Access-Control-Allow-Methods：

   示例：Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS（需包含预检请求的OPTIONS方法）。

   Access-Control-Allow-Headers：

   示例：Access-Control-Allow-Headers: Content-Type, Authorization（需明确列出自定义头）。

   Access-Control-Allow-Credentials：

   允许凭据（如Cookie）：Access-Control-Allow-Credentials: true（此时Access-Control-Allow-Origin不能为*）。

   Access-Control-Max-Age：

   预检请求缓存时间：Access-Control-Max-Age: 86400（秒），减少重复预检。

2. 使用中间件简化配置

   Node.js + Express示例：const express = require('express');const cors = require('cors');const app = express();// 精细配置const corsOptions = { origin: (origin, callback) => { const whitelist = ['

   https://your-frontend.com'
   , '
   http://localhost:3000'
   ]; if (whitelist.includes(origin) || !origin) { callback(null, true); } else { callback(new Error('Not allowed by CORS')); } }, methods: 'GET, POST, PUT, DELETE, OPTIONS', allowedHeaders: 'Content-Type, Authorization', credentials: true, optionsSuccessStatus: 204};app.use(cors(corsOptions));

1. 检查服务器是否处理OPTIONS方法

   确保服务器能响应OPTIONS请求，避免返回404或405错误。

   Express示例：// 自动处理所有路由的OPTIONS请求app.options('*', cors(corsOptions));

2. 验证预检响应头

   Access-Control-Allow-Methods需包含正式请求的方法（如PUT）。

   Access-Control-Allow-Headers需包含自定义头（如Authorization）。

   响应状态码应为200或204。

3. 排查中间件或防火墙干扰

   检查负载均衡器、反向代理（如Nginx）是否拦截或修改了OPTIONS请求。

1. 从浏览器控制台错误入手，明确问题类型（如缺失响应头、预检失败）。
2. 通过网络标签页对比请求/响应头，定位配置遗漏或冲突。
3. 服务器端配置需全面，覆盖方法、头、凭据等场景。
4. 预检请求是关键，确保服务器正确处理OPTIONS方法并返回必要头。

通过以上步骤，可系统化排查并解决跨域问题。核心工具始终是浏览器开发者工具，而服务器端配置需兼顾安全性与灵活性。