vue項(xiàng)目打包發(fā)布到Nginx后無法訪問后端接口的解決辦法
老套路，一圖勝千言，先附上一張瀏覽器里請求后端數(shù)據(jù)的動圖
作為一個(gè)桌面軟件開發(fā)者，為了給客戶出示推送數(shù)據(jù)到http接口的demo，耗費(fèi)一周時(shí)間寫了個(gè)vue請求后端http接口的程序，結(jié)果在vscode里運(yùn)行，請求后端接口沒問題，打包發(fā)布到nginx就請求失敗了，此處記錄一下解決過程。
vue跨域代碼
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
target: 'http://192.168.0.100:8090/', //要解決跨域的接口的域名
secure:false, //如果是https接口，需要配置這個(gè)參數(shù)
changeOrigin: true, // 如果接口跨域，需要進(jìn)行這個(gè)參數(shù)配置
pathRewrite: {
'^/api': '' // 路徑重寫,這里的api代替target里面的地址
}
}
},
nginx配置文件代碼
#access_log logs/host.access.log main;
location / {
root D:/xxx/web/vue001/;
index index.html index.htm;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
location /api/{
proxy_pass http://192.168.0.100:8090/;
}
其中的關(guān)聯(lián)性，分析一下應(yīng)該能看明白，我也是初學(xué)就不在此賣弄了，問題是解決了，怎么解決的，原理是什么，后續(xù)如果深入這個(gè)領(lǐng)域再補(bǔ)課吧。
總結(jié)
到此這篇關(guān)于vue項(xiàng)目打包發(fā)布到Nginx后無法訪問后端接口的解決辦法的文章就介紹到這了,更多相關(guān)vue打包發(fā)布Nginx無法訪問后端接口內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue + socket.io實(shí)現(xiàn)一個(gè)簡易聊天室示例代碼
本篇文章主要介紹了vue + socket.io實(shí)現(xiàn)一個(gè)簡易聊天室示例代碼，具有一定的參考價(jià)值，有興趣的可以了解一下。2017-03-03
定時(shí)器如果不及時(shí)合理地清除，會造成業(yè)務(wù)邏輯混亂甚至應(yīng)用卡死的情況，這個(gè)時(shí)就需要清除定時(shí)器，本文就介紹了Vue如何優(yōu)雅的清除定時(shí)器，感興趣的可以了解一下2021-07-07
Vue3 elementUI如何修改el-date-picker默認(rèn)時(shí)間
這篇文章主要介紹了Vue3 elementUI如何修改el-date-picker默認(rèn)時(shí)間，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue2使用el-date-picker實(shí)現(xiàn)動態(tài)日期范圍demo
這篇文章主要為大家介紹了vue2使用el-date-picker實(shí)現(xiàn)動態(tài)日期范圍示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
Vue導(dǎo)出el-table表格為Excel文件的兩種方式
在開發(fā)過程中,我們經(jīng)常需要將表格數(shù)據(jù)導(dǎo)出為 Excel 文件,大多數(shù)情況下,由后端處理即可,但是當(dāng)數(shù)據(jù)量不大、需要快速響應(yīng)用戶操作、或者數(shù)據(jù)已經(jīng)在前端進(jìn)行處理和展示時(shí),前端該如何實(shí)現(xiàn)呢,本文將介紹兩種方法,需要的朋友可以參考下2024-09-09
Vue解決開發(fā)環(huán)境Ajax跨域問題的多種方法對比
本文將帶大家深入理解跨域原理,并提供 Vue CLI（webpack）和 Vite 兩種構(gòu)建工具下的完整解決方案,讓大家的開發(fā)流程更順暢,希望對大家有所幫助2025-11-11
Vue.js 實(shí)現(xiàn)數(shù)據(jù)展示全部和收起功能
這篇文章主要介紹了Vue.js 實(shí)現(xiàn)數(shù)據(jù)展示全部和收起功能,代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-09-09
vue+elementui 表格分頁限制最大頁碼數(shù)的操作代碼
這篇文章主要介紹了vue+elementui 表格分頁限制最大頁碼數(shù)的操作代碼,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-08-08
vue3+vue-router+vite實(shí)現(xiàn)動態(tài)路由的全過程
動態(tài)路由是根據(jù)不同情況實(shí)時(shí)變化的路由,在權(quán)限管理系統(tǒng)中,動態(tài)路由常用于根據(jù)用戶角色分配不同的菜單和功能,這篇文章主要介紹了vue3+vue-router+vite實(shí)現(xiàn)動態(tài)路由的相關(guān)資料,需要的朋友可以參考下2024-10-10
這篇文章主要為大家詳細(xì)介紹了Vue仿百度搜索功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12