使用Nginx代理解決跨域問(wèn)題并傳遞請(qǐng)求頭的完整指南
引言
在現(xiàn)代 Web 開(kāi)發(fā)中，跨域資源共享（CORS）是一個(gè)常見(jiàn)的問(wèn)題。當(dāng)你的前端應(yīng)用嘗試從一個(gè)域名請(qǐng)求另一個(gè)域名的資源時(shí)，瀏覽器會(huì)阻止這種請(qǐng)求，除非目標(biāo)服務(wù)器明確允許跨域訪問(wèn)。為了解決這個(gè)問(wèn)題，開(kāi)發(fā)者通常會(huì)使用代理服務(wù)器來(lái)轉(zhuǎn)發(fā)請(qǐng)求，從而繞過(guò)瀏覽器的同源策略。
本文將詳細(xì)介紹如何使用 Nginx 作為代理服務(wù)器來(lái)解決跨域問(wèn)題，并確保前端請(qǐng)求頭（如 Cookie、User-Agent、Accept 等）能夠正確傳遞到目標(biāo)服務(wù)器。我們將從 Nginx 的基本配置開(kāi)始，逐步深入，最終形成一個(gè)完整的解決方案。
1. 什么是跨域問(wèn)題？
跨域問(wèn)題是由瀏覽器的同源策略引起的。同源策略要求瀏覽器只能允許來(lái)自同一域名的請(qǐng)求，而阻止來(lái)自其他域名的請(qǐng)求。具體來(lái)說(shuō)，如果前端應(yīng)用的域名是 http://localhost:8080，而目標(biāo) API 的域名是 http://travel.yundasys.com:31432，那么瀏覽器會(huì)阻止這種跨域請(qǐng)求。
1.1 跨域問(wèn)題的表現(xiàn)
當(dāng)你嘗試從前端發(fā)起跨域請(qǐng)求時(shí)，瀏覽器會(huì)返回類(lèi)似以下的錯(cuò)誤：
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 解決跨域問(wèn)題的常見(jiàn)方法
- CORS 頭配置：在目標(biāo)服務(wù)器上配置
Access-Control-Allow-Origin頭，允許特定域名的跨域請(qǐng)求。 - JSONP：通過(guò)動(dòng)態(tài)創(chuàng)建
<script>標(biāo)簽繞過(guò)跨域限制，但只支持 GET 請(qǐng)求。 - 代理服務(wù)器：使用代理服務(wù)器轉(zhuǎn)發(fā)請(qǐng)求，從而繞過(guò)瀏覽器的同源策略。
本文將重點(diǎn)介紹如何使用 Nginx 作為代理服務(wù)器來(lái)解決跨域問(wèn)題。
2. 使用 Nginx 作為代理服務(wù)器
Nginx 是一個(gè)高性能的 HTTP 服務(wù)器和反向代理服務(wù)器。通過(guò)配置 Nginx，我們可以將前端的請(qǐng)求轉(zhuǎn)發(fā)到目標(biāo)服務(wù)器，并在響應(yīng)中添加必要的 CORS 頭，從而解決跨域問(wèn)題。
2.1 Nginx 的基本配置
以下是一個(gè)簡(jiǎn)單的 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;
}
}
}
在這個(gè)配置中，Nginx 監(jiān)聽(tīng) 80 端口，并將請(qǐng)求轉(zhuǎn)發(fā)到本地的 html 目錄。
2.2 添加跨域支持
為了支持跨域請(qǐng)求，我們需要在 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;
}
}
在這個(gè)配置中，我們添加了 add_header 指令來(lái)設(shè)置 CORS 頭，允許所有域名的跨域請(qǐng)求。
3. 配置 Nginx 代理傳遞請(qǐng)求頭
默認(rèn)情況下，Nginx 會(huì)將客戶端（瀏覽器）發(fā)送的請(qǐng)求頭（如 Accept、Cookie、User-Agent 等）轉(zhuǎn)發(fā)到目標(biāo)服務(wù)器。然而，如果你在 Nginx 配置中顯式地設(shè)置了某些請(qǐng)求頭（如 Host、X-Real-IP 等），可能會(huì)覆蓋或刪除原始請(qǐng)求頭。
為了確保所有請(qǐng)求頭能夠正確傳遞到目標(biāo)服務(wù)器，我們需要調(diào)整 Nginx 配置。
3.1 修改后的 Nginx 配置
以下是修改后的 Nginx 配置，確保所有請(qǐng)求頭都被正確傳遞：
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 請(qǐng)求
location /api/ {
proxy_pass http://travel.yundasys.com:31432/; # 替換為你的 API 服務(wù)器地址
# 保留原始請(qǐng)求頭
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)鍵改動(dòng)說(shuō)明
proxy_pass_request_headers on;：- 這是默認(rèn)行為，確保所有客戶端請(qǐng)求頭都被傳遞到目標(biāo)服務(wù)器。
- 如果你沒(méi)有顯式覆蓋某些請(qǐng)求頭，這一步可以省略。
proxy_set_header：- 使用
proxy_set_header設(shè)置必要的代理頭（如Host、X-Real-IP等）。 - 對(duì)于需要保留的原始請(qǐng)求頭（如
Cookie、User-Agent、Accept），使用$http_<header_name>變量傳遞原始值。
- 使用
$http_<header_name>：$http_cookie：傳遞原始Cookie頭。$http_user_agent：傳遞原始User-Agent頭。$http_accept：傳遞原始Accept頭。
4. 驗(yàn)證請(qǐng)求頭是否被正確傳遞
為了確保請(qǐng)求頭被正確傳遞到目標(biāo)服務(wù)器，你可以通過(guò)以下方式驗(yàn)證：
檢查目標(biāo)服務(wù)器的日志：
- 在目標(biāo)服務(wù)器上查看日志，確認(rèn)接收到的請(qǐng)求頭是否與前端發(fā)送的一致。
使用調(diào)試工具：
- 在 Nginx 中啟用調(diào)試日志，查看請(qǐng)求頭是否被正確轉(zhuǎn)發(fā)：
error_log /var/log/nginx/error.log debug;
在 Nginx 中記錄請(qǐng)求頭：
- 在 Nginx 配置中添加日志記錄，輸出請(qǐng)求頭：
location /api/ {
proxy_pass http://travel.yundasys.com:31432/;
access_log /var/log/nginx/access.log;
error_log /var/log/nginx/error.log;
# 記錄請(qǐng)求頭
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";
// 請(qǐng)求頭
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ā)起請(qǐng)求
fetch(url, {
method: "GET", // 請(qǐng)求方法
headers: headers, // 請(qǐng)求頭
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); // 捕獲錯(cuò)誤
});
6. 總結(jié)
通過(guò)本文的介紹，我們?cè)敿?xì)講解了如何使用 Nginx 作為代理服務(wù)器來(lái)解決跨域問(wèn)題，并確保前端請(qǐng)求頭能夠正確傳遞到目標(biāo)服務(wù)器。以下是關(guān)鍵點(diǎn)總結(jié)：
- 跨域問(wèn)題的本質(zhì)：瀏覽器的同源策略阻止了跨域請(qǐng)求。
- Nginx 代理的作用：通過(guò)代理服務(wù)器轉(zhuǎn)發(fā)請(qǐng)求，繞過(guò)瀏覽器的同源策略。
- Nginx 配置的關(guān)鍵點(diǎn)：
- 使用
add_header設(shè)置 CORS 頭。 - 使用
proxy_set_header傳遞原始請(qǐng)求頭。
- 使用
- 驗(yàn)證請(qǐng)求頭：通過(guò)日志和調(diào)試工具確保請(qǐng)求頭被正確傳遞。
- 前端代碼的調(diào)整：將目標(biāo) URL 改為代理地址。
到此這篇關(guān)于使用Nginx代理解決跨域問(wèn)題并傳遞請(qǐng)求頭的完整指南的文章就介紹到這了,更多相關(guān)Nginx解決跨域問(wèn)題并傳遞請(qǐng)求頭內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
root和alias是兩個(gè)重要但經(jīng)常令人混淆的指令,尤其用于指定資源在服務(wù)器文件系統(tǒng)中的位置,本文就來(lái)介紹一下兩個(gè)指令的使用與區(qū)別,感興趣的可以了解一下2024-08-08
使用nginx+tomcat實(shí)現(xiàn)靜態(tài)和動(dòng)態(tài)頁(yè)面的分離
這篇文章主要介紹了使用nginx+tomcat實(shí)現(xiàn)靜態(tài)和動(dòng)態(tài)頁(yè)面的分離，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧。2017-01-01
Nginx PHP-Fcgi中因PHP執(zhí)行時(shí)間導(dǎo)致504 Gateway Timeout錯(cuò)誤解決記錄
這篇文章主要介紹了Nginx PHP-Fcgi中因PHP執(zhí)行時(shí)間導(dǎo)致504 Gateway Timeout錯(cuò)誤解決記錄,本文的解決方法得來(lái)不易,需要的朋友可以參考下2014-09-09
Nginx map實(shí)現(xiàn)基于客戶端 IP 段的動(dòng)態(tài)后端路由的幾種方法實(shí)現(xiàn)
這篇文章主要介紹了Nginx map實(shí)現(xiàn)基于客戶端 IP 段的動(dòng)態(tài)后端路由的幾種方法實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2026-04-04
這篇文章主要介紹了關(guān)于nginx訪問(wèn)控制的兩種方法，一種是基于Basic Auth認(rèn)證，另一種是基于IP的訪問(wèn)控制，文中介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-03-03
nginx支持codeigniter的pathinfo模式url重寫(xiě)配置寫(xiě)法示例
這篇文章主要介紹了nginx支持codeigniter的pathinfo模式url重寫(xiě)配置寫(xiě)法示例,pathinfo模式是一種開(kāi)發(fā)框架都愛(ài)用的路由模式,需要的朋友可以參考下2014-07-07
Nginx 中 ssl_buffer_size 參數(shù)調(diào)優(yōu)的具體實(shí)現(xiàn)
ssl_buffer_size 不是越大越好,也不是越小越快,它本質(zhì)是在首包響應(yīng)速度和 TLS 協(xié)議開(kāi)銷(xiāo)之間做取舍,本文主要介紹了Nginx 中 ssl_buffer_size 參數(shù)調(diào)優(yōu)的具體實(shí)現(xiàn),感興趣的可以了解一下2026-04-04
Nginx內(nèi)存不足對(duì)Web應(yīng)用的影響及解決方法
本文詳細(xì)介紹了Nginx內(nèi)存不足對(duì)Web應(yīng)用的影響,包括連接和請(qǐng)求處理失敗、現(xiàn)有服務(wù)中斷、性能?chē)?yán)重下降、Nginx進(jìn)程異常、觸發(fā)操作系統(tǒng)OOMKiller、緩存失效和日志丟失或?qū)懭胧?文章還提供了診斷內(nèi)存不足的監(jiān)控工具和關(guān)鍵指標(biāo),需要的朋友可以參考下2026-03-03
Nginx圖片服務(wù)器配置之后圖片訪問(wèn)404的問(wèn)題解決
本文主要介紹了Nginx圖片服務(wù)器配置之后圖片訪問(wèn)404的問(wèn)題解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
Nginx代理時(shí)header頭中帶"_"信息丟失問(wèn)題的解決
這篇文章主要給大家介紹了關(guān)于Nginx代理時(shí)header頭中帶"_"信息丟失問(wèn)題的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02