vue項目打包發(fā)布到Nginx后無法訪問后端接口的解決辦法
更新時間：2024年04月03日 08:27:19 作者：x縣豆瓣醬
這篇文章主要給大家介紹了關(guān)于vue項目打包發(fā)布到Nginx后無法訪問后端接口的解決辦法,記錄一下項目需要注意的地方,方便以后快速使用,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
老套路，一圖勝千言，先附上一張瀏覽器里請求后端數(shù)據(jù)的動圖
作為一個桌面軟件開發(fā)者，為了給客戶出示推送數(shù)據(jù)到http接口的demo，耗費(fèi)一周時間寫了個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接口，需要配置這個參數(shù)
changeOrigin: true, // 如果接口跨域，需要進(jìn)行這個參數(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ù)如果深入這個領(lǐng)域再補(bǔ)課吧。
總結(jié)
到此這篇關(guān)于vue項目打包發(fā)布到Nginx后無法訪問后端接口的解決辦法的文章就介紹到這了,更多相關(guān)vue打包發(fā)布Nginx無法訪問后端接口內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
五分鐘教你使用vue-cli3創(chuàng)建項目(新手入門)
本文主要介紹了五分鐘教你使用vue-cli3創(chuàng)建項目，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
利用Vue3實現(xiàn)一個可以用js調(diào)用的組件
最近遇到個功能要求,想要在全局中調(diào)用組件,而且要在某些js文件內(nèi)調(diào)用,所以這篇文章主要給大家介紹了關(guān)于如何利用Vue3實現(xiàn)一個可以用js調(diào)用的組件的相關(guān)資料,需要的朋友可以參考下2021-08-08
vite+vue3+element-plus搭建項目的踩坑記錄
這篇文章主要介紹了vite+vue3+element-plus搭建項目的踩坑記錄,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要為大家介紹了繪制flowable?流程圖的Vue?庫使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
Vue 基礎(chǔ)語法之計算屬性(computed)、偵聽器(watch)、過濾器(filters)詳解
計算屬性就是 Vue 實例選項中的 computed，computed 的值是一個對象類型，對象中的屬性值為函數(shù)，而且這個函數(shù)沒辦法接收參數(shù)，這篇文章主要介紹了Vue 基礎(chǔ)語法之計算屬性(computed)、偵聽器(watch)、過濾器(filters)詳解,需要的朋友可以參考下2022-11-11
vue實現(xiàn)echarts餅圖/柱狀圖點(diǎn)擊事件實例
echarts原生提供了相應(yīng)的API,只需要在配置好echarts之后綁定相應(yīng)的事件即可,下面這篇文章主要給大家介紹了關(guān)于vue實現(xiàn)echarts餅圖/柱狀圖點(diǎn)擊事件的相關(guān)資料,需要的朋友可以參考下2023-06-06
這篇文章主要為大家展示了一個demo，即利用Vue和OpenLayer在地圖上面添加風(fēng)場效果，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下2022-04-04
Vue.js實戰(zhàn)之使用Vuex + axios發(fā)送請求詳解
這篇文章主要給大家介紹了關(guān)于Vue.js使用Vuex與axios發(fā)送請求的相關(guān)資料，文中介紹的非常詳細(xì)，相信對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-04-04
這篇文章主要介紹了vue中多個倒計時實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
Vue3已經(jīng)穩(wěn)定了相當(dāng)長一段時間了。許多代碼庫都在生產(chǎn)環(huán)境中使用它，其他人最終都將不得不遷移到Vue3。我現(xiàn)在有機(jī)會使用它并記錄了我的錯誤，下面這些錯誤你可能想要避免2023-03-03