一、问题/场景描述
在前后端分离的Web开发项目中，前端应用（如Vue.js、React）与后端API服务（如Java Spring Boot、Node.js）通常部署在不同的域名或端口下。当前端JavaScript代码尝试通过Ajax或Fetch API请求后端资源时，浏览器会因同源策略（Same-Origin Policy）而拦截请求，并抛出“Access-Control-Allow-Origin”相关的跨域错误，导致前端无法正常获取数据。
二、原因分析
跨域问题源于浏览器的同源安全策略，它限制了来自不同源（协议、域名、端口任一不同）的脚本与资源进行交互。当请求的源与目标资源不同源时，浏览器会先发送一个预检请求（Preflight Request，通常是OPTIONS方法）到服务器，询问是否允许跨域。如果服务器响应头中没有包含正确的跨域资源共享（CORS）头部信息，浏览器就会阻止后续的实际请求。因此，解决此问题的核心是在提供API服务的Nginx服务器上，配置正确的响应头，明确告知浏览器允许哪些来源、方法和头部进行跨域访问。
三、详细解决步骤
以下是在Nginx配置文件中添加CORS支持的详细步骤，主要涉及修改 nginx.conf 或在站点配置文件中添加 location 块。
步骤1：定位并编辑Nginx配置文件
首先，找到你的Nginx配置文件。主配置文件通常位于 /etc/nginx/nginx.conf，而具体的站点配置通常在 /etc/nginx/conf.d/ 或 /etc/nginx/sites-available/ 目录下。使用文本编辑器（如vim或nano）打开需要配置的站点文件。
sudo vim /etc/nginx/conf.d/your-site.conf步骤2：在对应的location块中添加CORS头部
找到处理API请求的 location 块（例如 location /api/），或者如果你想全局启用，可以放在 server 块中。在块内添加以下配置指令。
location /api/ {
# 设置允许跨域请求的源，* 表示允许任何源，生产环境建议指定具体域名
add_header Access-Control-Allow-Origin *;
# 允许客户端携带的请求头
add_header Access-Control-Allow-Headers 'Authorization, Content-Type, X-Requested-With, X-CSRF-Token';
# 允许的HTTP方法
add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS, PATCH';
# 是否允许浏览器发送Cookie等凭证信息，设置为true时，Allow-Origin不能为*
add_header Access-Control-Allow-Credentials false;
# 预检请求结果的缓存时间（秒）
add_header Access-Control-Max-Age 3600;
# 如果是预检请求（OPTIONS），直接返回204状态码
if ($request_method = 'OPTIONS') {
return 204;
}
# 你的代理配置或其他指令
proxy_pass http://backend_server;
}步骤3：检查配置语法并重载Nginx
在保存配置文件后，务必使用 nginx -t 命令测试配置文件语法是否正确。如果测试通过，再使用 systemctl reload nginx 或 nginx -s reload 命令平滑重载配置，使更改生效。
sudo nginx -t
sudo systemctl reload nginx步骤4：验证配置是否生效
配置完成后，可以通过浏览器开发者工具的“网络”（Network）面板，查看API请求的响应头。成功的情况下，你应该能看到类似 Access-Control-Allow-Origin: * 的头部信息。也可以使用curl命令进行测试。
curl -I -X OPTIONS http://your-domain.com/api/endpoint四、注意事项
在生产环境中，出于安全考虑，不建议将 Access-Control-Allow-Origin 设置为通配符 *，而应明确指定可信的前端域名。若需要传递Cookie等凭证信息，必须将 Access-Control-Allow-Credentials 设置为 true，并且 Access-Control-Allow-Origin 必须指定为具体的、非通配符的源。此外，add_header 指令在继承上有特定规则，如果配置在嵌套的 location 中，可能会覆盖外层的头部设置，需仔细检查。