使用Nginx代理解决跨域问题并传递请求头的完整指南
更新时间：2025年01月17日 08:51:24 作者：码农阿豪@新空间代码工作室
在现代 Web 开发中,跨域资源共享（CORS）是一个常见的问题,当你的前端应用尝试从一个域名请求另一个域名的资源时,浏览器会阻止这种请求,除非目标服务器明确允许跨域访问,本文将详细介绍如何使用 Nginx 作为代理服务器来解决跨域问题,需要的朋友可以参考下
引言
在现代 Web 开发中，跨域资源共享（CORS）是一个常见的问题。当你的前端应用尝试从一个域名请求另一个域名的资源时，浏览器会阻止这种请求，除非目标服务器明确允许跨域访问。为了解决这个问题，开发者通常会使用代理服务器来转发请求，从而绕过浏览器的同源策略。
本文将详细介绍如何使用 Nginx 作为代理服务器来解决跨域问题，并确保前端请求头（如 Cookie、User-Agent、Accept 等）能够正确传递到目标服务器。我们将从 Nginx 的基本配置开始，逐步深入，最终形成一个完整的解决方案。
1. 什么是跨域问题？
跨域问题是由浏览器的同源策略引起的。同源策略要求浏览器只能允许来自同一域名的请求，而阻止来自其他域名的请求。具体来说，如果前端应用的域名是 http://localhost:8080，而目标 API 的域名是 http://travel.yundasys.com:31432，那么浏览器会阻止这种跨域请求。
1.1 跨域问题的表现
当你尝试从前端发起跨域请求时，浏览器会返回类似以下的错误：
Access to XMLHttpRequest at 'http://travel.yundasys.com:31432/interface/orderPhone?txm=320328706913678&type=1' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
1.2 解决跨域问题的常见方法
- CORS 头配置：在目标服务器上配置
Access-Control-Allow-Origin头，允许特定域名的跨域请求。 - JSONP：通过动态创建
<script>标签绕过跨域限制，但只支持 GET 请求。 - 代理服务器：使用代理服务器转发请求，从而绕过浏览器的同源策略。
本文将重点介绍如何使用 Nginx 作为代理服务器来解决跨域问题。
2. 使用 Nginx 作为代理服务器
Nginx 是一个高性能的 HTTP 服务器和反向代理服务器。通过配置 Nginx，我们可以将前端的请求转发到目标服务器，并在响应中添加必要的 CORS 头，从而解决跨域问题。
2.1 Nginx 的基本配置
以下是一个简单的 Nginx 配置文件示例：
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 80;
server_name localhost;
location / {
root html;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
在这个配置中，Nginx 监听 80 端口，并将请求转发到本地的 html 目录。
2.2 添加跨域支持
为了支持跨域请求，我们需要在 Nginx 配置中添加以下内容：
server {
listen 80;
server_name localhost;
# 支持跨域的配置
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
location / {
root html;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
在这个配置中，我们添加了 add_header 指令来设置 CORS 头，允许所有域名的跨域请求。
3. 配置 Nginx 代理传递请求头
默认情况下，Nginx 会将客户端（浏览器）发送的请求头（如 Accept、Cookie、User-Agent 等）转发到目标服务器。然而，如果你在 Nginx 配置中显式地设置了某些请求头（如 Host、X-Real-IP 等），可能会覆盖或删除原始请求头。
为了确保所有请求头能够正确传递到目标服务器，我们需要调整 Nginx 配置。
3.1 修改后的 Nginx 配置
以下是修改后的 Nginx 配置，确保所有请求头都被正确传递：
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 80;
server_name localhost;
# 支持跨域的配置
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
location / {
root html;
index index.html index.htm;
}
# 代理 API 请求
location /api/ {
proxy_pass http://travel.yundasys.com:31432/; # 替换为你的 API 服务器地址
# 保留原始请求头
proxy_pass_request_headers on;
# 设置必要的代理头
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
# 如果需要传递原始 Cookie，确保不覆盖 Cookie 头
proxy_set_header Cookie $http_cookie;
# 如果需要传递原始 User-Agent，确保不覆盖 User-Agent 头
proxy_set_header User-Agent $http_user_agent;
# 如果需要传递原始 Accept，确保不覆盖 Accept 头
proxy_set_header Accept $http_accept;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
3.2 关键改动说明
proxy_pass_request_headers on;：- 这是默认行为，确保所有客户端请求头都被传递到目标服务器。
- 如果你没有显式覆盖某些请求头，这一步可以省略。
proxy_set_header：- 使用
proxy_set_header设置必要的代理头（如Host、X-Real-IP等）。 - 对于需要保留的原始请求头（如
Cookie、User-Agent、Accept），使用$http_<header_name>变量传递原始值。
- 使用
$http_<header_name>：$http_cookie：传递原始Cookie头。$http_user_agent：传递原始User-Agent头。$http_accept：传递原始Accept头。
4. 验证请求头是否被正确传递
为了确保请求头被正确传递到目标服务器，你可以通过以下方式验证：
检查目标服务器的日志：
- 在目标服务器上查看日志，确认接收到的请求头是否与前端发送的一致。
使用调试工具：
- 在 Nginx 中启用调试日志，查看请求头是否被正确转发：
error_log /var/log/nginx/error.log debug;
在 Nginx 中记录请求头：
- 在 Nginx 配置中添加日志记录，输出请求头：
location /api/ {
proxy_pass http://travel.yundasys.com:31432/;
access_log /var/log/nginx/access.log;
error_log /var/log/nginx/error.log;
# 记录请求头
add_header X-Debug-Request-Headers "$http_user_agent $http_cookie";
}
5. 前端代码的调整
如果你使用了 Nginx 代理，前端代码中的 url 需要改为代理地址。例如：
// 目标 URL（改为 Nginx 代理地址）
const url = "http://your-nginx-server/api/interface/orderPhone?txm=320328706913678&type=1";
// 请求头
const headers = {
"Accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7",
"Accept-Language": "zh-CN,zh;q=0.9",
"Cache-Control": "max-age=0",
"Connection": "keep-alive",
"Cookie": "CASTGC=TGT-37528572-jMiSLXk2PqxLEdKk2lxzXfSwgfo5MYa3MdD; SESSION=OTdiOTQ4NDQtY2M2ZC00NmVjLTgwZmItNzMzNDVjZDlmNmU4",
"DNT": "1",
"Upgrade-Insecure-Requests": "1",
"User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36"
};
// 发起请求
fetch(url, {
method: "GET", // 请求方法
headers: headers, // 请求头
credentials: "include" // 包含 Cookie
})
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.text(); // 解析响应为文本
})
.then(data => {
console.log("Response data:", data); // 输出响应数据
})
.catch(error => {
console.error("Error:", error); // 捕获错误
});
6. 总结
通过本文的介绍，我们详细讲解了如何使用 Nginx 作为代理服务器来解决跨域问题，并确保前端请求头能够正确传递到目标服务器。以下是关键点总结：
- 跨域问题的本质：浏览器的同源策略阻止了跨域请求。
- Nginx 代理的作用：通过代理服务器转发请求，绕过浏览器的同源策略。
- Nginx 配置的关键点：
- 使用
add_header设置 CORS 头。 - 使用
proxy_set_header传递原始请求头。
- 使用
- 验证请求头：通过日志和调试工具确保请求头被正确传递。
- 前端代码的调整：将目标 URL 改为代理地址。
到此这篇关于使用Nginx代理解决跨域问题并传递请求头的完整指南的文章就介绍到这了,更多相关Nginx解决跨域问题并传递请求头内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
使用Nginx搭建代理服务器(正向代理HTTPS网站)的操作指南
在网络应用中,代理服务器是用于中转用户请求和服务端响应的工具,正向代理主要用于客户端与外部服务器之间的访问代理,帮助客户端隐藏其 IP 地址或访问受限资源,本文将详细介绍如何使用 Nginx 搭建正向代理服务器,特别是针对 HTTPS 网站的代理2024-11-11
这篇文章主要为大家介绍了使用Nginx为自己的网站资源加上防盗链保护实现详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
这篇文章主要介绍了Nginx常见的错误配置举例，帮助大家更好的理解和学习使用Nginx，感兴趣的朋友可以了解下2021-03-03
日志对于统计排错来说非常有利的,本文为大家总结了nginx日志相关的配置如access_log、log_format、open_log_file_cache等内容,感兴趣的小伙伴可以了解下2023-08-08
这篇文章主要介绍了阿里云Nginx配置https实现域名访问项目(图文教程)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-09-09
在CentOS 7上使用Nginx将www重定向到非www的完整步骤
本文介绍了如何在CentOS7上使用Nginx进行域名重定向配置,以及设置相应的DNS记录,重定向不仅有助于提高网站的搜索引擎排名,还能确保用户无论通过www还是非www域名访问,都能获得一致的网站体验,需要的朋友可以参考下2024-11-11
这篇文章主要为大家介绍了nginx的keepalive相关参数使用源码解读,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-12-12
这篇文章主要介绍了修改配置解决Nginx服务器中常见的上传与连接错误的方法,分别针对Nginx的413错误与111错误,需要的朋友可以参考下2016-01-01
本文主要介绍了Nginx的配置文件结构和HTTP配置指令,涵盖了从请求处理到安全、日志、负载均衡、缓存等各个方面,具有一定的参考价值,感兴趣的可以了解一下2024-12-12
在工作中我遇到了一个类似的情况：在公司网络中，由于管理要求，局域网内的电脑不能直接访问外网，但是，工作上领导吩咐需要让局域网内的电脑能够访问外网上的某个网站，这时候就需要用到正向代理，本文将介绍如何配置 Nginx 实现这一功能,需要的朋友可以参考下2024-03-03
最新评论