詳解vue-cli3 中跨域解決方案
此方案只能用于開發(fā)環(huán)境，線上最好設(shè)置同源策略（遇到個后端,裝你媽批）
前后端不在同一服務(wù)器的情況下，前端要訪問后端API，可通過在vue.config.js中配置代理服務(wù)器。
0：前提條件
1：安裝vue-lic
2：安裝axios 用于發(fā)送請求。
1：將任何未知請求轉(zhuǎn)發(fā)到代理服務(wù)器
如：
前端地址：127.0.0.1
后端地址：127.0.0.2
當(dāng)訪問地址為 127.0.0.1/api，沒有匹配到這地址，那么就會被轉(zhuǎn)發(fā)到代理服務(wù)器127.0.0.2/api
module.exports={
devServer:{
proxy: "http://www.acfun.cn"
}
}
2：多代理控制
更多代理服務(wù)配置項搜索http-proxy-middleware查看
module.exports = {
devServer: {
proxy: {
'/search': { // search為轉(zhuǎn)發(fā)路徑
target: 'http://www.acfun.cn', // 目標(biāo)地址
ws: true, // 是否代理websockets
changeOrigin: true // 設(shè)置同源 默認(rèn)false，是否需要改變原始主機(jī)頭為目標(biāo)URL,
}
}
}
};
如：
當(dāng)前訪問地址為 xxx.xxx.xxx/search時，就會被轉(zhuǎn)發(fā)到代理服務(wù)器http://www.acfun.cn/search
xxx.xxx.xxx/search -> http://www.acfun.cn/search
3：實(shí)例
api.js 文件（主要用于全局配置）
import Axios from "axios";
let http = Axios.create({
timeout: 3000, //超時配置 3秒
responseType: 'json', // 響應(yīng)數(shù)據(jù)格式
responseEncoding: 'utf8', // 響應(yīng)數(shù)據(jù)編碼
});
export default http;
入口文件 main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import http from "./api"; // 引用axios全局配置
Vue.config.productionTip = false;
Vue.prototype.$http = http; // 添加原型方法，這樣創(chuàng)建的對象就自帶該方法了。
new Vue({
router,
render: h => h(App)
}).$mount("#app");
vue.config.js 配置文件
更多代理服務(wù)配置項搜索http-proxy-middleware查看
module.exports = {
devServer: {
proxy: {
'/search': {
target: 'http://www.acfun.cn',
ws: true,//是否代理websockets
changeOrigin: true // 設(shè)置同源 默認(rèn)false，是否需要改變原始主機(jī)頭為目標(biāo)URL
}
}
}
};
總結(jié)
以上所述是小編給大家介紹的vue-cli3 中跨域解決方案，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
Vue Object 的變化偵測實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue Object的變化偵測實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
這篇文章主要為大家介紹了vue條件渲染列表渲染原理示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
vue3+vite+ts使用monaco-editor編輯器的簡單步驟
因為畢設(shè)需要用到代碼編輯器,根據(jù)調(diào)研,我選擇使用monaco-editor代碼編輯器,下面這篇文章主要給大家介紹了關(guān)于vue3+vite+ts使用monaco-editor編輯器的簡單步驟,需要的朋友可以參考下2023-01-01
詳解unplugin?vue?components不能識別組件自動導(dǎo)入類型pnpm
這篇文章主要為大家介紹了unplugin?vue?components不能識別組件自動導(dǎo)入類型pnpm詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
這篇文章主要介紹了淺談Vue響應(yīng)式(數(shù)組變異方法)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要介紹了VueX模塊的具體使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
vue3使用Pinia修改state的三種方法(直接修改，$patch，actions)
Vue3?Pinia是一個狀態(tài)管理庫,專門為Vue3設(shè)計優(yōu)化,它提供了一種簡單而強(qiáng)大的方式來管理應(yīng)用程序的狀態(tài),并且與Vue3的響應(yīng)式系統(tǒng)緊密集成,本文給大家介紹了vue3使用Pinia修改state的三種方法,需要的朋友可以參考下2024-03-03
Vue3 Element-plus el-menu無限級菜單組件封裝過程
對于element中提供給我們的el-menu組件最多可以實(shí)現(xiàn)三層嵌套，如果多一層數(shù)據(jù)只能自己通過變量去加一層，如果加了兩層、三層這種往往是行不通的，所以只能進(jìn)行封裝，這篇文章主要介紹了Vue3 Element-plus el-menu無限級菜單組件封裝,需要的朋友可以參考下2023-04-04
vue中的data,computed,methods,created,mounted用法及說明
這篇文章主要介紹了vue中的data,computed,methods,created,mounted用法及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
vue中watch監(jiān)聽路由傳來的參數(shù)變化問題
這篇文章主要介紹了vue中watch監(jiān)聽路由傳來的參數(shù)變化,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-07-07