服务器跨域访问异常故障排查配置
服务器跨域访问异常故障排查与配置指南跨域访问异常常见原因
跨域访问异常通常是由于浏览器的同源策略(Same-Origin Policy)导致的，当以下任一条件不满足时就会触发：
[*]协议不同 (HTTP/HTTPS)
[*]域名不同
[*]端口不同
故障排查步骤
1. 检查响应头
确认服务器返回的响应头中是否包含正确的CORS头：
[*]Access-Control-Allow-Origin - 允许的源，可以是具体域名或*
[*]Access-Control-Allow-Methods - 允许的HTTP方法
[*]Access-Control-Allow-Headers - 允许的请求头
[*]Access-Control-Allow-Credentials - 是否允许携带凭证
2. 验证请求类型
[*]简单请求：GET、POST、HEAD等标准方法，Content-Type为特定值
[*]预检请求(Preflight)：使用PUT、DELETE等方法或自定义头时会先发送OPTIONS请求
3. 检查浏览器控制台
查看浏览器开发者工具中的网络请求，确认：
[*]是否有OPTIONS预检请求及其状态
[*]响应头是否正确
[*]是否有错误信息
服务器端配置方案
Nginx 配置示例
location / {
# 允许的源，生产环境建议指定具体域名而非*
add_header 'Access-Control-Allow-Origin' 'https://your-client-domain.com' always;
# 允许的请求方法
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE' always;
# 允许的请求头
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization' always;
# 是否允许携带凭证
add_header 'Access-Control-Allow-Credentials' 'true' always;
# 预检请求缓存时间
add_header 'Access-Control-Max-Age' 1728000 always;
# 对于OPTIONS请求直接返回204
if ($request_method = 'OPTIONS') {
return 204;
}
}
Apache 配置示例
<IfModule mod_headers.c>
Header always set Access-Control-Allow-Origin "https://your-client-domain.com"
Header always set Access-Control-Allow-Methods "GET, POST, OPTIONS, PUT, DELETE"
Header always set Access-Control-Allow-Headers "DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization"
Header always set Access-Control-Allow-Credentials "true"
Header always set Access-Control-Max-Age "1728000"
</IfModule>
# 处理OPTIONS请求
RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1
Node.js (Express) 配置示例
app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', 'https://your-client-domain.com');
res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, DELETE');
res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, X-Requested-With');
res.header('Access-Control-Allow-Credentials', 'true');
if (req.method === 'OPTIONS') {
return res.sendStatus(204);
}
next();
});
常见问题解决方案
[*]携带Cookie时：
[*]必须明确指定Access-Control-Allow-Origin，不能使用*
[*]设置Access-Control-Allow-Credentials: true
[*]自定义请求头：
[*]需要在Access-Control-Allow-Headers中明确列出
[*]复杂请求：
[*]确保正确处理OPTIONS预检请求
[*]生产环境安全：
[*]避免使用Access-Control-Allow-Origin: *，应指定具体域名
[*]考虑使用白名单机制动态设置允许的源
调试技巧
[*]使用Postman或curl测试API，绕过浏览器限制
[*]在浏览器中禁用web安全(仅限开发测试)：
[*]Chrome: chrome.exe --disable-web-security --user-data-dir="C:/Temp"
[*]使用浏览器插件临时禁用CORS检查
通过以上配置和排查步骤，应该能够解决大多数跨域访问异常问题。
页:
[1]