使用Nginx代理解決跨域問題并傳遞請求頭的完整指南
更新時間：2025年01月17日 08:51:24 作者：碼農阿豪@新空間代碼工作室
在現代 Web 開發(fā)中,跨域資源共享（CORS）是一個常見的問題,當你的前端應用嘗試從一個域名請求另一個域名的資源時,瀏覽器會阻止這種請求,除非目標服務器明確允許跨域訪問,本文將詳細介紹如何使用 Nginx 作為代理服務器來解決跨域問題,需要的朋友可以參考下
引言
在現代 Web 開發(fā)中，跨域資源共享（CORS）是一個常見的問題。當你的前端應用嘗試從一個域名請求另一個域名的資源時，瀏覽器會阻止這種請求，除非目標服務器明確允許跨域訪問。為了解決這個問題，開發(fā)者通常會使用代理服務器來轉發(fā)請求，從而繞過瀏覽器的同源策略。
本文將詳細介紹如何使用 Nginx 作為代理服務器來解決跨域問題，并確保前端請求頭（如 Cookie、User-Agent、Accept 等）能夠正確傳遞到目標服務器。我們將從 Nginx 的基本配置開始，逐步深入，最終形成一個完整的解決方案。
1. 什么是跨域問題？
跨域問題是由瀏覽器的同源策略引起的。同源策略要求瀏覽器只能允許來自同一域名的請求，而阻止來自其他域名的請求。具體來說，如果前端應用的域名是 http://localhost:8080，而目標 API 的域名是 http://travel.yundasys.com:31432，那么瀏覽器會阻止這種跨域請求。
1.1 跨域問題的表現
當你嘗試從前端發(fā)起跨域請求時，瀏覽器會返回類似以下的錯誤：
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：通過動態(tài)創(chuàng)建
<script>標簽繞過跨域限制，但只支持 GET 請求。 - 代理服務器：使用代理服務器轉發(fā)請求，從而繞過瀏覽器的同源策略。
本文將重點介紹如何使用 Nginx 作為代理服務器來解決跨域問題。
2. 使用 Nginx 作為代理服務器
Nginx 是一個高性能的 HTTP 服務器和反向代理服務器。通過配置 Nginx，我們可以將前端的請求轉發(fā)到目標服務器，并在響應中添加必要的 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 監(jiān)聽 80 端口，并將請求轉發(fā)到本地的 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 會將客戶端（瀏覽器）發(fā)送的請求頭（如 Accept、Cookie、User-Agent 等）轉發(fā)到目標服務器。然而，如果你在 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. 驗證請求頭是否被正確傳遞
為了確保請求頭被正確傳遞到目標服務器，你可以通過以下方式驗證：
檢查目標服務器的日志：
- 在目標服務器上查看日志，確認接收到的請求頭是否與前端發(fā)送的一致。
使用調試工具：
- 在 Nginx 中啟用調試日志，查看請求頭是否被正確轉發(fā)：
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"
};
// 發(fā)起請求
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 代理的作用：通過代理服務器轉發(fā)請求，繞過瀏覽器的同源策略。
- Nginx 配置的關鍵點：
- 使用
add_header設置 CORS 頭。 - 使用
proxy_set_header傳遞原始請求頭。
- 使用
- 驗證請求頭：通過日志和調試工具確保請求頭被正確傳遞。
- 前端代碼的調整：將目標 URL 改為代理地址。
到此這篇關于使用Nginx代理解決跨域問題并傳遞請求頭的完整指南的文章就介紹到這了,更多相關Nginx解決跨域問題并傳遞請求頭內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
使用Nginx搭建代理服務器(正向代理HTTPS網站)的操作指南
在網絡應用中,代理服務器是用于中轉用戶請求和服務端響應的工具,正向代理主要用于客戶端與外部服務器之間的訪問代理,幫助客戶端隱藏其 IP 地址或訪問受限資源,本文將詳細介紹如何使用 Nginx 搭建正向代理服務器,特別是針對 HTTPS 網站的代理2024-11-11
這篇文章主要為大家介紹了使用Nginx為自己的網站資源加上防盜鏈保護實現詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
這篇文章主要介紹了Nginx常見的錯誤配置舉例，幫助大家更好的理解和學習使用Nginx，感興趣的朋友可以了解下2021-03-03
日志對于統(tǒng)計排錯來說非常有利的,本文為大家總結了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