nginx配置解決跨域訪問的方法詳解
后端環(huán)境
正常訪問端口8058
經(jīng)過nginx配置（文末具體展示）后，去除端口，如下：
前端開發(fā)環(huán)境
1. 配置開發(fā)和生產(chǎn)的環(huán)境變量
.env.development文件
# API服務(wù)路徑 VITE_APP_BASE_URL = ""
.env.production文件
# API服務(wù)路徑，注意沒有端口號，是經(jīng)過nginx處理后的后端服務(wù)地址 VITE_APP_BASE_URL = "http://192.168.1.4/"
2. vite.config.ts 文件配置開發(fā)代理
import { warpperEnv } from "./build";
import { UserConfigExport, ConfigEnv, loadEnv } from "vite";
/** 當(dāng)前執(zhí)行node命令時文件夾的地址（工作目錄） */
const root: string = process.cwd();
export default ({ command, mode }: ConfigEnv): UserConfigExport => {
const { VITE_CDN, VITE_PORT, VITE_COMPRESSION, VITE_PUBLIC_PATH } =
warpperEnv(loadEnv(mode, root));
return {
base: VITE_PUBLIC_PATH,
root,
resolve: {
alias
},
// 服務(wù)端渲染
server: {
// 是否開啟 https
https: false,
// 端口號
port: VITE_PORT,
host: "0.0.0.0",
// 本地跨域代理 https://cn.vitejs.dev/config/server-options.html#server-proxy
proxy: {
"^/api": {
target: "http://192.168.1.4:8058",
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, "")
}
}
},
// 后面省略...
}
};
3. http 文件封裝 axios，使用環(huán)境變量配置的基礎(chǔ)API路徑
// 相關(guān)配置請參考：www.axios-js.com/zh-cn/docs/#axios-request-config-1
const defaultConfig: AxiosRequestConfig = {
// 請求地址
baseURL: import.meta.env.VITE_APP_BASE_URL,
// 請求超時時間
timeout: 5000,
headers: {
Accept: "application/json, text/plain, */*",
"Content-Type": "application/json",
"X-Requested-With": "XMLHttpRequest"
}
};
4. api 文件里使用示例
import { http } from "@/utils/http";
export type UserResult = {
success: boolean;
data: {
username: string;
roles: Array<string>;
accessToken: string;
refreshToken: string;
expires: Date;
};
};
/** 登錄 */
export const getLogin = (data?: object) => {
return http.request<UserResult>("post", "/api/login", { data });
};
5. 開發(fā)環(huán)境項目預(yù)覽
由于使用了代理，所以不會有跨域的問題，如圖：
前端生產(chǎn)環(huán)境
生產(chǎn)環(huán)境采用Tomcat，前端項目打包好后，放在Tomcat的 webapps/ROOT 目錄下即可，如圖：
啟動Tomcat，雙擊 apache-tomcat-8.5.93/bin/ 目錄下的 startup.bat，linux機器到 bin 目錄下，運行 ./startup.sh
訪問，Tomcat默認(rèn)端口為8080，訪問后臺接口報跨域錯誤
nginx配置后，去除端口，訪問正常
nginx配置
以上可以看出，nginx配置的目的，就是去除前后端的端口差異，從而解決跨域的問題。配置文件 nginx/conf/nginx.conf 修改如下：
server {
listen 80;
# IP/域名都可以
server_name http://192.168.1.4;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html;
index index.html index.htm;
proxy_pass http://192.168.1.4: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;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_connect_timeout 5;
}
location ^~ /api/ {
add_header 'Access-Control-Allow-Origin' $http_origin;
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
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://192.168.1.4:8058/;
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;
proxy_connect_timeout 5;
}
}
疑問解答
1. 此示例項目，本地模擬的線上環(huán)境，操作系統(tǒng) windows，后端服務(wù) nodejs。換成 linux 系統(tǒng)或其他后端服務(wù)（如：SpringBoot 等）還適用嗎，為什么？
答：同樣適用。
因為跨域問題是瀏覽器為了安全保證，當(dāng)你前端服務(wù)訪問跨域資源時，被瀏覽器默認(rèn)禁止了，所以和后端服務(wù)是什么，沒有必然關(guān)系；所以解決問題的思路也是讓我們的訪問請求，達(dá)到瀏覽器的要求，即不跨域（同一域名/IP、端口、協(xié)議），那當(dāng)然使用 nginx 就可以。
2. 前端請求里的代理里的 ^api，和nginx配置里的 ^~ /api/ 有什么關(guān)系？
答：有關(guān)系，但是不是你想象的關(guān)系。
首先我們要確認(rèn)，你的實際的請求地址里，其實不包含 api 這段路徑。如圖：
開發(fā)環(huán)境加這個只是為了代理區(qū)分，因為你可能要請求多個不同域名的后端服務(wù)：我可以在 vite.config.ts 文件的 proxy 里再加一個以 ^/auth 開頭的，導(dǎo)向其他域名的后端服務(wù)。
其次代碼里也可以看到 rewrite: path => path.replace(/^\/api/, "")，所以實際的請求地址，最終是去掉了 api。
那為什么nginx里要配置成 api 呢？
因為線上環(huán)境是沒有運行代理的，也就是說 rewrite: path => path.replace(/^\/api/, "") 這一段是沒有生效的，那你前端實際的請求地址就是 http://192.168.1.4/api/login，而真正的地址里沒有 api 這一段，所以多出來的這一段，正好讓nginx去代理，^~ /api/ 變成 http://192.168.1.4:8058/，從而使請求地址變成 http://192.168.1.4:8058/login。
3. 接上，這兩 api 雖然不是我想象的關(guān)系，但是事實上必須保持一致，有沒有什么可以解耦的辦法？
答：有。
nginx一般不會去隨便改動，所以我們的解決辦法優(yōu)先放在前端，讓前端去適配nginx。
參考 vite.config.ts 文件的代理地址替換，那我們在實際請求地址時，也可以做一個替換處理：在 http 文件里的請求攔截器中，判斷是否生產(chǎn)環(huán)境，如果是，則替換 ^api 為nginx配置的開頭路徑即可。
4. 接上，vite.config.ts 可以配置多個代理，nginx也可以配置多個后端服務(wù)，但是 http 文件里的 axios 封裝只有一個 baseURL？
答：不是有攔截器嗎。
env 環(huán)境配置里增加多個域名字段，假如以 auth 開頭是另一個域名，那就在攔截器里使用條件判斷，如果是 auth 開頭，修改 config.baseURL 地址。
或者封裝多個 axois？不建議，代碼重復(fù)率又高了。
5. 既然nginx已經(jīng)把 api 開頭的都代理到了后端服務(wù)，那我前端就不能有 api 開頭的路由？
答：可以。
看看訪問路徑，前端是哈希路由，有 # 號分隔的。如果是 history 路由呢，有試過的同學(xué)可以在評論區(qū)吱個聲。
到此這篇關(guān)于nginx配置解決跨域訪問的方法詳解的文章就介紹到這了,更多相關(guān)nginx解決跨域訪問內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
WAF即web應(yīng)用防火墻,Nginx是一個主流的代理服務(wù),除了本身的Nginx日志,作為用戶肯定也支持對請求信息進(jìn)行操作,?很多都是通過在代理服務(wù)器上掛載規(guī)則特征,實現(xiàn)軟件層面的軟WAF進(jìn)行WEB防護(hù),本文主要給大家介紹了Nginx+Lua實現(xiàn)一個簡單的XSS攻擊攔截,需要的朋友可以參考下2024-01-01
本篇文章主要介紹了詳解Nginx配置多站點需要踩的坑，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
在Nginx中實現(xiàn)基于IP的訪問控制(IP黑白名單)的具體步驟
在 NGINX 中實現(xiàn)基于 IP 地址的訪問控制（IP 黑白名單）是一種常見的安全策略,可以通過 allow 和 deny 指令來實現(xiàn),下面是如何配置黑白名單的步驟,感興趣的小伙伴跟著小編一起來看看吧2025-05-05
這篇文章主要介紹了Nginx下配置301重定向的正確方法例子,本文給出了常用的配置方法例子和正確的配置例子,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了nginx 匹配規(guī)則小總結(jié)及nginx配置proxy_pass路徑帶/問題，需要的朋友可以參考下2018-07-07
本文主要介紹了Nginx實現(xiàn)端口映射的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-09-09
這篇文章主要介紹了一些優(yōu)化Nginx服務(wù)器的技巧簡介,包括對HTTP模塊和Events模塊的配置建議,需要的朋友可以參考下2015-06-06
nginx-ingress-controller部署配置詳解
這篇文章主要為大家介紹了nginx ingress controller的部署配置,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
本文介紹了使用Nginx解決Web開發(fā)中的跨域問題,并通過一個實例說明了配置和測試過程,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-10-10
在當(dāng)今的網(wǎng)絡(luò)環(huán)境中,數(shù)據(jù)安全至關(guān)重要,SSL和 TLS為數(shù)據(jù)傳輸提供了加密保護(hù),Nginx 是一款高性能的 Web 服務(wù)器,廣泛應(yīng)用于處理 HTTPS 請求,本文將詳細(xì)介紹如何在 Nginx 中配置 SSL,需要的朋友可以參考下2025-06-06