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ù)路徑,注意沒有端口號(hào),是經(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命令時(shí)文件夾的地址(工作目錄) */ 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, // 端口號(hào) 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)配置請(qǐng)參考:www.axios-js.com/zh-cn/docs/#axios-request-config-1 const defaultConfig: AxiosRequestConfig = { // 請(qǐng)求地址 baseURL: import.meta.env.VITE_APP_BASE_URL, // 請(qǐng)求超時(shí)時(shí)間 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)境項(xiàng)目預(yù)覽
由于使用了代理,所以不會(huì)有跨域的問題,如圖:
前端生產(chǎn)環(huán)境
生產(chǎn)環(huán)境采用Tomcat,前端項(xiàng)目打包好后,放在Tomcat的 webapps/ROOT
目錄下即可,如圖:
啟動(dòng)Tomcat,雙擊 apache-tomcat-8.5.93/bin/
目錄下的 startup.bat
,linux機(jī)器到 bin
目錄下,運(yùn)行 ./startup.sh
訪問,Tomcat默認(rèn)端口為8080,訪問后臺(tái)接口報(bào)跨域錯(cuò)誤
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. 此示例項(xiàng)目,本地模擬的線上環(huán)境,操作系統(tǒng) windows,后端服務(wù) nodejs。換成 linux 系統(tǒng)或其他后端服務(wù)(如:SpringBoot 等)還適用嗎,為什么?
答:同樣適用。
因?yàn)榭缬騿栴}是瀏覽器為了安全保證,當(dāng)你前端服務(wù)訪問跨域資源時(shí),被瀏覽器默認(rèn)禁止了,所以和后端服務(wù)是什么,沒有必然關(guān)系;所以解決問題的思路也是讓我們的訪問請(qǐng)求,達(dá)到瀏覽器的要求,即不跨域(同一域名/IP、端口、協(xié)議),那當(dāng)然使用 nginx
就可以。
2. 前端請(qǐng)求里的代理里的 ^api,和nginx配置里的 ^~ /api/ 有什么關(guān)系?
答:有關(guān)系,但是不是你想象的關(guān)系。
首先我們要確認(rèn),你的實(shí)際的請(qǐng)求地址里,其實(shí)不包含 api
這段路徑。如圖:
開發(fā)環(huán)境加這個(gè)只是為了代理區(qū)分,因?yàn)槟憧赡芤?qǐng)求多個(gè)不同域名的后端服務(wù):我可以在 vite.config.ts
文件的 proxy
里再加一個(gè)以 ^/auth
開頭的,導(dǎo)向其他域名的后端服務(wù)。
其次代碼里也可以看到 rewrite: path => path.replace(/^\/api/, "")
,所以實(shí)際的請(qǐng)求地址,最終是去掉了 api
。
那為什么nginx里要配置成 api
呢?
因?yàn)榫€上環(huán)境是沒有運(yùn)行代理的,也就是說 rewrite: path => path.replace(/^\/api/, "")
這一段是沒有生效的,那你前端實(shí)際的請(qǐng)求地址就是 http://192.168.1.4/api/login
,而真正的地址里沒有 api
這一段,所以多出來的這一段,正好讓nginx去代理,^~ /api/
變成 http://192.168.1.4:8058/
,從而使請(qǐng)求地址變成 http://192.168.1.4:8058/login
。
3. 接上,這兩 api 雖然不是我想象的關(guān)系,但是事實(shí)上必須保持一致,有沒有什么可以解耦的辦法?
答:有。
nginx一般不會(huì)去隨便改動(dòng),所以我們的解決辦法優(yōu)先放在前端,讓前端去適配nginx。
參考 vite.config.ts
文件的代理地址替換,那我們?cè)趯?shí)際請(qǐng)求地址時(shí),也可以做一個(gè)替換處理:在 http
文件里的請(qǐng)求攔截器中,判斷是否生產(chǎn)環(huán)境,如果是,則替換 ^api
為nginx配置的開頭路徑即可。
4. 接上,vite.config.ts 可以配置多個(gè)代理,nginx也可以配置多個(gè)后端服務(wù),但是 http 文件里的 axios 封裝只有一個(gè) baseURL?
答:不是有攔截器嗎。
env
環(huán)境配置里增加多個(gè)域名字段,假如以 auth
開頭是另一個(gè)域名,那就在攔截器里使用條件判斷,如果是 auth
開頭,修改 config.baseURL
地址。
或者封裝多個(gè) axois
?不建議,代碼重復(fù)率又高了。
5. 既然nginx已經(jīng)把 api 開頭的都代理到了后端服務(wù),那我前端就不能有 api 開頭的路由?
答:可以。
看看訪問路徑,前端是哈希路由,有 #
號(hào)分隔的。如果是 history
路由呢,有試過的同學(xué)可以在評(píng)論區(qū)吱個(gè)聲。
到此這篇關(guān)于nginx配置解決跨域訪問的方法詳解的文章就介紹到這了,更多相關(guān)nginx解決跨域訪問內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
nginx安裝時(shí),make編譯可能會(huì)出現(xiàn)的錯(cuò)誤問題
這篇文章主要介紹了nginx安裝時(shí),make編譯可能會(huì)出現(xiàn)的錯(cuò)誤問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06nginx-proxy-manager初次登錄報(bào)錯(cuò)502?bad?gateway解決
這篇文章主要給大家介紹了關(guān)于nginx-proxy-manager初次登錄報(bào)錯(cuò)502?bad?gateway的解決辦法,502?Bad?Gateway服務(wù)器作為網(wǎng)關(guān)或者代理時(shí),為了完成請(qǐng)求訪問下一個(gè)服務(wù)器,但該服務(wù)器返回了非法的應(yīng)答,需要的朋友可以參考下2024-04-04Nginx服務(wù)器中強(qiáng)制使用緩存的配置及緩存優(yōu)先級(jí)的講解
這篇文章主要介紹了Nginx服務(wù)器中強(qiáng)制使用緩存的配置及緩存優(yōu)先級(jí)的講解,一定程度上可以幫助大家解決Nginx不緩存或緩存失效的問題,需要的朋友可以參考下2016-01-01總結(jié)高并發(fā)下Nginx性能如何優(yōu)化
這篇文章主要為大家介紹了在高并發(fā)下Nginx性能如何優(yōu)化的總結(jié)分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步2021-10-10keepalived+nginx實(shí)現(xiàn)雙服務(wù)器主備方案
本文主要介紹了使用keepalived和nginx實(shí)現(xiàn)雙服務(wù)器主備方案,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-12-12nginx配置訪問圖片路徑以及html靜態(tài)頁(yè)面的調(diào)取方法
這篇文章主要介紹了詳解nginx配置訪問圖片路徑以及html靜態(tài)頁(yè)面的調(diào)取方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。2016-12-12