關(guān)于vue項目proxyTable配置和部署服務(wù)器的問題

更新時間：2022年04月14日 11:08:48 作者：ma_pei

這篇文章主要介紹了關(guān)于vue項目proxyTable配置和部署服務(wù)器的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

proxyTable配置和部署服務(wù)器

在本地創(chuàng)建node.js服務(wù)器，前端訪問本地接口需要設(shè)置跨域

1.在config中的index

找到proxyTable，完成以下設(shè)置

proxyTable: {
‘/api': {
target: ‘http://localhost:8808/', //目標接口域名
changeOrigin: true, //是否跨域
pathRewrite: {
‘^/api': ‘/' //重寫接口
}
}
},

在這里插入圖片描述

2.在調(diào)取接口的方法中

在這里插入圖片描述

下面是node.js服務(wù)端的

在這里插入圖片描述

切記：：：！??！配置完成后一定要重啟前端項目，要不然會報錯

proxyTable代理參數(shù)含義

vue項目里，找到index.js文件，再proxyTable 寫入相應(yīng)的代理即可，網(wǎng)上有些說自己新建一個vue.config.js文件，項目啟動時會自己導(dǎo)入，也是可以的

proxyTable: {
? ? ? // 這里配置 '/api' 就等價于 target , 你在鏈接里訪問 /api === http://localhost:54321
? ? ? '/api': {//該api可以自定義，比如寫成abc，但同時下方的/^api也要改成/^abc了
? ? ? ? target: 'http://localhost:54321/', // 服務(wù)器的接口地址，即你要訪問的真實地址,http或者https都可以 // ? ? ? ?http://localhost:54321/json.data.json,
? ? ? ? changeOrigin: true, // 是否是跨域請求?肯定是啊,不跨域就沒有必要配置這個proxyTable了.
? ? ? ? ? logLevel: 'debug',//調(diào)試時，可以輸出代理后的真實地址是什么，上線時注釋掉即可
? ? ? ? pathRewirte: {
? ? ? ? ? // 這里是追加鏈接,比如真是接口里包含了 /api,就需要這樣配置.以下兩種方式任寫一種即可
?
? ? ? ? ? ? //方式一，留空，不寫
? ? ? ? ? ? ?'/^api': '', //代表你在axios里的請求'/api/info' = http://localhost:54321/info
?
? ? ? ? ? ? //方式二，重寫
? ? ? ? ? ? '/^api': 'api/', //代表你在axios里的請求'/api/info' = http://localhost:54321/api/info
?? ? ? ? }
? ? ? }
? ? ?},

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: