nginx 代理接口 配置跨域

<think>我们正在解决的是Nginx代理接口配置跨域问题。根据引用内容，我们可以总结出以下关键点：1.跨域问题可以通过Nginx反向代理解决（引用[4]）2.配置Nginx时，需要正确设置跨域请求头（引用[3]）3.在配置中，对于预检请求（OPTIONS）需要特殊处理（引用[3]）4.注意避免将接口请求误当作静态资源处理（引用[1]）解决方案步骤：1.在Nginx配置中，通过反向代理将前端请求转发到后端接口2.设置跨域请求头，包括Access-Control-Allow-Origin等3.对预检请求（OPTIONS）进行处理，直接返回204状态码并设置相应的跨域头部具体配置示例（结合引用[2]和引用[3]的最佳实践）：假设：-前端服务运行在http://localhost:8080-后端接口地址为http://backend-server:8080/api-我们希望通过Nginx代理/api路径到后端配置如下：```nginxserver{listen80;server_namelocalhost;#静态资源服务（可选）location/{root/usr/share/nginx/html;indexindex.htmlindex.htm;try_files$uri$uri//index.html;}#代理接口location/api/{#解决跨域问题#设置允许跨域的源，这里设置为前端地址，也可以根据需求设置为*add_header'Access-Control-Allow-Origin'$http_originalways;add_header'Access-Control-Allow-Credentials''true'always;add_header'Access-Control-Allow-Methods''GET,POST,PUT,DELETE,OPTIONS'always;add_header'Access-Control-Allow-Headers''Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Requested-With'always;#处理预检请求if($request_method='OPTIONS'){#告诉浏览器缓存此预检请求1天（86400秒）add_header'Access-Control-Max-Age'86400;add_header'Content-Type''text/plain;charset=utf-8';add_header'Content-Length'0;return204;}#反向代理到后端服务proxy_passhttp://backend-server:8080/api/;proxy_set_headerHost$host;proxy_set_headerX-Real-IP$remote_addr;proxy_set_headerX-Forwarded-For$proxy_add_x_forwarded_for;}}```配置说明：1.`add_header'Access-Control-Allow-Origin'$http_originalways;`这里使用`$http_origin`动态获取请求的源，这样比写死一个源更灵活（但要注意安全性，生产环境建议设置允许的源白名单）。`always`参数确保在所有响应中包括此头部（包括4xx/5xx响应）。2.对于预检请求（OPTIONS），我们直接返回204，并设置相应的跨域头部。注意预检请求不需要转发到后端，直接在Nginx处理。3.`proxy_pass`指令将请求转发到后端服务，注意末尾的`/`会去掉`/api/`前缀，即请求`/api/user`会被转发到`http://backend-server:8080/api/user`。如果不需要保留前缀，可以写成`proxy_passhttp://backend-server:8080/;`（这样就会转发到`http://backend-server:8080/user`）。注意事项：1.如果后端服务本身也设置了跨域头部，可能会导致重复。建议在Nginx统一设置跨域头部，后端服务不再设置。2.生产环境中，`Access-Control-Allow-Origin`不建议设置为`*`，而应该设置为前端具体的域名（或多个域名通过$http_origin动态判断，但需要验证域名是否在允许列表中）。3.如果需要携带Cookie，则`Access-Control-Allow-Origin`不能为`*`，必须指定具体域名，并且`Access-Control-Allow-Credentials`设置为`true`。动态设置允许的源（白名单）：我们可以使用map来定义允许的源，例如：```nginx#在http块中定义允许的源http{map$http_origin$allow_origin{default"";"~^https?://(localhost:8080|www.example.com)$"$http_origin;}server{...location/api/{add_header'Access-Control-Allow-Origin'$allow_originalways;...}}}```这样，只有来自`localhost:8080`和`www.example.com`的请求才会被允许跨域。测试：1.重启Nginx：`nginx-sreload`2.使用curl测试预检请求：```bashcurl-XOPTIONS-H"Origin:http://localhost:8080"-H"Access-Control-Request-Method:GET"-Ihttp://your-nginx-server/api/test```检查响应头中是否有`Access-Control-Allow-Origin`等跨域头。3.测试实际请求：```bashcurl-H"Origin:http://localhost:8080"-Ihttp://your-nginx-server/api/test```通过以上配置，即可解决Nginx代理接口的跨域问题。§§相关问题§§1.Nginx反向代理时如何保留原始请求的Host头？2.如何配置Nginx以支持WebSocket代理？3.在Nginx中如何配置多个后端服务器的负载均衡？</think>### Nginx 代理接口跨域解决方案 针对 Nginx 代理接口的跨域问题，结合您提供的引用内容，以下是完整的配置方案和原理说明： #### 一、核心配置方案 ```nginx server { listen 80; server_name your-domain.com; # 前端静态资源 location / { root /usr/share/nginx/html; try_files $uri $uri/ /index.html; } # API 接口代理配置 location /api/ { # 解决跨域问题 add_header 'Access-Control-Allow-Origin' '$http_origin' always; add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always; add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Requested-With' always; add_header 'Access-Control-Allow-Credentials' 'true' always; # 处理预检请求(OPTIONS) if ($request_method = 'OPTIONS') { add_header 'Access-Control-Max-Age' 1728000; add_header 'Content-Type' 'text/plain; charset=utf-8'; add_header 'Content-Length' 0; return 204; } # 反向代理到后端服务 proxy_pass http://backend-server:8080; # 替换为实际后端地址 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } # 错误处理 error_page 404 /404.html; location = /404.html { internal; } error_page 500 502 503 504 /50x.html; location = /50x.html { internal; } } ``` #### 二、关键配置说明 1. **跨域头部设置** [^3] - `Access-Control-Allow-Origin`: 动态使用 `$http_origin` 比 `*` 更安全 - `Access-Control-Allow-Credentials`: 设为 `true` 允许携带 Cookie - `Access-Control-Allow-Methods`: 声明允许的 HTTP 方法 - `always` 参数确保所有响应都包含这些头部 2. **预检请求处理** [^3] ```nginx if ($request_method = 'OPTIONS') { add_header 'Access-Control-Max-Age' 1728000; # 缓存预检结果20天 return 204; # 空响应 } ``` - OPTIONS 请求直接由 Nginx 处理，不转发到后端 - 减少后端服务器压力 3. **反向代理机制** [^4] ```nginx proxy_pass http://backend-server:8080; proxy_set_header Host $host; ``` - 将 `your-domain.com/api/xxx` 代理到 `backend-server:8080/xxx` - 浏览器认为所有请求来自同源（Nginx 所在域） 4. **路径匹配技巧** - 使用 `/api/` 确保只代理接口请求 - 避免前端静态资源被误代理 [^1] #### 三、生产环境优化建议 1. **安全加固** ```nginx # 限制允许的源 map $http_origin $allow_origin { ~^https?://(www\.)?yourdomain.com$ $http_origin; default ""; } add_header 'Access-Control-Allow-Origin' $allow_origin; ``` 2. **负载均衡配置** [^2] ```nginx upstream backend { server 10.12.1.210:30003; server 10.12.1.211:30003; } location /api/ { proxy_pass http://backend; } ``` 3. **WebSocket 支持** ```nginx location /ws/ { proxy_pass http://backend; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; } ``` #### 四、常见问题解决 1. **502 Bad Gateway** [^1] - 检查后端服务是否存活：`systemctl status your-backend-service` - 增加代理超时时间： ```nginx proxy_connect_timeout 60s; proxy_read_timeout 600s; ``` 2. **预检请求失败** - 确保 OPTIONS 处理块中也有跨域头部 [^3] - 使用 curl 测试： ```bash curl -X OPTIONS -H "Origin: http://your-frontend.com" \ -I http://your-nginx-server/api/test ``` 3. **Cookie 失效问题** - 前后端都需要设置： ```nginx # Nginx proxy_cookie_path / "/; secure; HttpOnly; SameSite=None"; ``` - 前端 axios 配置：`withCredentials: true` #### 五、配置验证步骤 1. 检查 Nginx 配置 ```bash nginx -t ``` 2. 重载配置 ```bash nginx -s reload ``` 3. 测试接口访问 ```bash curl -H "Origin: http://your-frontend.com" \ -I http://your-nginx-server/api/health ``` 应返回： ``` HTTP/1.1 200 OK Access-Control-Allow-Origin: http://your-frontend.com ``` > **原理总结**：通过反向代理，Nginx 作为中间层将不同源的接口请求转化为"同源"请求[^4]，并通过 CORS 头部解决浏览器跨域限制[^3]。这种方案既无需修改后端代码，又能避免前端 JSONP 等不安全方案。