使用Nginx代理解決跨域問題并傳遞請求頭的完整指南
引言
在現(xiàn)代 Web 開發(fā)中，跨域資源共享（CORS）是一個常見的問題。當(dāng)你的前端應(yīng)用嘗試從一個域名請求另一個域名的資源時，瀏覽器會阻止這種請求，除非目標(biāo)服務(wù)器明確允許跨域訪問。為了解決這個問題，開發(fā)者通常會使用代理服務(wù)器來轉(zhuǎn)發(fā)請求，從而繞過瀏覽器的同源策略。
本文將詳細(xì)介紹如何使用 Nginx 作為代理服務(wù)器來解決跨域問題，并確保前端請求頭（如 Cookie、User-Agent、Accept 等）能夠正確傳遞到目標(biāo)服務(wù)器。我們將從 Nginx 的基本配置開始，逐步深入，最終形成一個完整的解決方案。
1. 什么是跨域問題？
跨域問題是由瀏覽器的同源策略引起的。同源策略要求瀏覽器只能允許來自同一域名的請求，而阻止來自其他域名的請求。具體來說，如果前端應(yīng)用的域名是 http://localhost:8080，而目標(biāo) API 的域名是 http://travel.yundasys.com:31432，那么瀏覽器會阻止這種跨域請求。
1.1 跨域問題的表現(xiàn)
當(dāng)你嘗試從前端發(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 頭配置：在目標(biāo)服務(wù)器上配置
Access-Control-Allow-Origin頭，允許特定域名的跨域請求。 - JSONP：通過動態(tài)創(chuàng)建
<script>標(biāo)簽繞過跨域限制，但只支持 GET 請求。 - 代理服務(wù)器：使用代理服務(wù)器轉(zhuǎn)發(fā)請求，從而繞過瀏覽器的同源策略。
本文將重點介紹如何使用 Nginx 作為代理服務(wù)器來解決跨域問題。
2. 使用 Nginx 作為代理服務(wù)器
Nginx 是一個高性能的 HTTP 服務(wù)器和反向代理服務(wù)器。通過配置 Nginx，我們可以將前端的請求轉(zhuǎn)發(fā)到目標(biāo)服務(wù)器，并在響應(yīng)中添加必要的 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 端口，并將請求轉(zhuǎn)發(fā)到本地的 html 目錄。
2.2 添加跨域支持
為了支持跨域請求，我們需要在 Nginx 配置中添加以下內(nèi)容：
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 指令來設(shè)置 CORS 頭，允許所有域名的跨域請求。
3. 配置 Nginx 代理傳遞請求頭
默認(rèn)情況下，Nginx 會將客戶端（瀏覽器）發(fā)送的請求頭（如 Accept、Cookie、User-Agent 等）轉(zhuǎn)發(fā)到目標(biāo)服務(wù)器。然而，如果你在 Nginx 配置中顯式地設(shè)置了某些請求頭（如 Host、X-Real-IP 等），可能會覆蓋或刪除原始請求頭。
為了確保所有請求頭能夠正確傳遞到目標(biāo)服務(wù)器，我們需要調(diào)整 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 服務(wù)器地址
# 保留原始請求頭
proxy_pass_request_headers on;
# 設(shè)置必要的代理頭
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 關(guān)鍵改動說明
proxy_pass_request_headers on;：- 這是默認(rèn)行為，確保所有客戶端請求頭都被傳遞到目標(biāo)服務(wù)器。
- 如果你沒有顯式覆蓋某些請求頭，這一步可以省略。
proxy_set_header：- 使用
proxy_set_header設(shè)置必要的代理頭（如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. 驗證請求頭是否被正確傳遞
為了確保請求頭被正確傳遞到目標(biāo)服務(wù)器，你可以通過以下方式驗證：
檢查目標(biāo)服務(wù)器的日志：
- 在目標(biāo)服務(wù)器上查看日志，確認(rèn)接收到的請求頭是否與前端發(fā)送的一致。
使用調(diào)試工具：
- 在 Nginx 中啟用調(diào)試日志，查看請求頭是否被正確轉(zhuǎn)發(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. 前端代碼的調(diào)整
如果你使用了 Nginx 代理，前端代碼中的 url 需要改為代理地址。例如：
// 目標(biāo) 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(); // 解析響應(yīng)為文本
})
.then(data => {
console.log("Response data:", data); // 輸出響應(yīng)數(shù)據(jù)
})
.catch(error => {
console.error("Error:", error); // 捕獲錯誤
});
6. 總結(jié)
通過本文的介紹，我們詳細(xì)講解了如何使用 Nginx 作為代理服務(wù)器來解決跨域問題，并確保前端請求頭能夠正確傳遞到目標(biāo)服務(wù)器。以下是關(guān)鍵點總結(jié)：
- 跨域問題的本質(zhì)：瀏覽器的同源策略阻止了跨域請求。
- Nginx 代理的作用：通過代理服務(wù)器轉(zhuǎn)發(fā)請求，繞過瀏覽器的同源策略。
- Nginx 配置的關(guān)鍵點：
- 使用
add_header設(shè)置 CORS 頭。 - 使用
proxy_set_header傳遞原始請求頭。
- 使用
- 驗證請求頭：通過日志和調(diào)試工具確保請求頭被正確傳遞。
- 前端代碼的調(diào)整：將目標(biāo) URL 改為代理地址。
到此這篇關(guān)于使用Nginx代理解決跨域問題并傳遞請求頭的完整指南的文章就介紹到這了,更多相關(guān)Nginx解決跨域問題并傳遞請求頭內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家介紹了Nginx服務(wù)的安裝以及軟件升級的步驟詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步2022-03-03
Nginx添加ipv6模塊以及遇到問題解決方案詳解(親測有效)
IPV4日益稀缺,ipv6已經(jīng)慢慢走上日程,待ipv6在國內(nèi)普及,使用nginx配置ipv6那是肯定的,下面這篇文章主要給大家介紹了關(guān)于Nginx添加ipv6模塊以及遇到問題的解決方案,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了詳解nginx請求頭數(shù)據(jù)讀取流程，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
詳解nginx?中l(wèi)ocation和?proxy_pass的匹配規(guī)則
location是Nginx中用來匹配客戶端請求URI的指令,決定如何處理特定路徑的請求,它定義了請求的路由規(guī)則,后續(xù)的配置（如?proxy_pass）會應(yīng)用在匹配的請求上,這篇文章主要介紹了nginxlocation和proxy_pass的匹配規(guī)則,需要的朋友可以參考下2025-04-04
本文主要介紹了nginx中url地址重寫的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-03-03
文章介紹Web運維中使用Nginx的limit_conn和limit_req模塊限制IP連接數(shù)及請求頻率,防范惡意攻擊和爬蟲,通過$binary_remote_addr或map模塊處理代理層IP,設(shè)置503錯誤防止服務(wù)器過載2025-08-08
利用Nginx反向代理功能解決WEB網(wǎng)站80端口被封的解決方法
大陸的網(wǎng)絡(luò)環(huán)境，都在天朝神獸的制度下讓我等小P民悲劇一片；動不動就拔網(wǎng)線、封機房；現(xiàn)在更厲害的一招，從網(wǎng)關(guān)封殺你的80端口，一旦被封，網(wǎng)站域名就無法訪問2012-08-08
這篇文章主要介紹了Nginx 負(fù)載均衡是什么以及該如何配置，幫助大家更好的理解和使用Nginx服務(wù)器，感興趣的朋友可以了解下2021-01-01
Nginx?默認(rèn)是不允許列出整個目錄的，那么需要這樣的功能怎么操作呢，下面小編給大家介紹下Nginx?禁止直接訪問目錄或文件的方法,需要的朋友可以參考下2022-10-10
k8s集群服務(wù)部署好之后，需要對外提域名訪問，這時候就需要ingress-nginx了，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-12-12