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