nginx解决vue3跨域

### 如何通过 Nginx 配置解决 Vue3 项目的 CORS 跨域问题

#### 解决方案概述
为了使前端应用能够顺利访问后端服务，在生产环境中通常会利用反向代理服务器来处理跨源资源共享 (CORS) 的问题。对于基于 Vue3 构建的应用程序来说，可以通过调整 Nginx 来实现这一目标。

#### Nginx 配置详解
在 Nginx 中设置适当头部信息以允许来自特定来源的请求是非常重要的。下面是一个典型的 Nginx 配置片段用于支持 CORS 请求：

server {
    listen       80;
    server_name  example.com;

    location /api/ {
        add_header 'Access-Control-Allow-Origin' '*';  # 允许所有来源访问, 生产环境下建议指定具体域名[^1]
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';

        if ($request_method = 'OPTIONS') {
            return 204;
        }

        proxy_pass http://backend_server_address/;
        proxy_set_header Host $host;
        proxy_set_head X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

上述配置中 `add_header` 指令用来添加响应头字段，从而告知浏览器哪些资源可以从其他站点加载；而针对预检请求（即 HTTP 方法为 OPTIONS），则直接返回状态码 204 表明该操作已被成功接收并无需进一步处理。

#### 前端配合措施
尽管主要工作是在服务器侧完成，但在某些情况下也需要确保客户端发出合适的请求形式。例如，在发送 AJAX 请求之前应确认已正确设置了必要的自定义 header 字段等[^2]。