跨域资源共享（CORS）是浏览器的一种安全特性，用于限制网页从一个域请求另一个域的资源。当您在使用 Nginx 部署 Web 应用时，可能会遇到跨域问题。本文将介绍如何通过 Nginx 配置解决跨域问题。
1. 什么是跨域
跨域指的是在一个域（如 example.com）中请求另一个域（如 api.example.com）的资源。浏览器出于安全考虑，会阻止这种请求，除非目标服务器允许。
2. Nginx 配置 CORS
要在 Nginx 中解决跨域问题，您需要在配置文件中添加相应的响应头。以下是常见的 CORS 配置示例。
2.1 允许所有域
如果您希望允许所有域访问，可以在 Nginx 配置文件中添加以下配置：
server {
listen 80;
server_name your_domain.com;
location / {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';
add_header 'Content-Length' 0;
return 204;
}
# 其他配置...
}
}2.2 允许特定域
如果您只想允许特定的域访问，可以将 '*' 替换为具体的域名：
add_header 'Access-Control-Allow-Origin' 'http://example.com';2.3 允许多域
如果需要允许多个特定域，可以使用 map 指令：
map $http_origin $allow_origin {
default '';
'http://example.com' $http_origin;
'http://another-example.com' $http_origin;
}
server {
listen 80;
server_name your_domain.com;
location / {
add_header 'Access-Control-Allow-Origin' $allow_origin;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' $allow_origin;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';
add_header 'Content-Length' 0;
return 204;
}
# 其他配置...
}
}3. 重新加载 Nginx 配置
在您修改了 Nginx 配置文件后，记得重新加载配置：
sudo nginx -s reload4. 测试 CORS 配置
您可以使用浏览器的开发者工具或工具如 Postman 进行测试，检查响应头中是否包含 Access-Control-Allow-Origin 等 CORS 相关头部。
5. 注意事项
- 安全性：允许所有域（
'*'）可能带来安全风险，建议根据实际需求配置允许的域。 - 预检请求：对于复杂请求，浏览器会先发送 OPTIONS 请求以检查服务器的支持情况，确保 Nginx 配置能够正确处理该请求。