詳解vue-cli3 中跨域解決方案
此方案只能用于開發(fā)環(huán)境，線上最好設(shè)置同源策略（遇到個(gè)后端,裝你媽批）
前后端不在同一服務(wù)器的情況下，前端要訪問后端API，可通過在vue.config.js中配置代理服務(wù)器。
0：前提條件
1：安裝vue-lic
2：安裝axios 用于發(fā)送請(qǐng)求。
1：將任何未知請(qǐng)求轉(zhuǎn)發(fā)到代理服務(wù)器
如：
前端地址：127.0.0.1
后端地址：127.0.0.2
當(dāng)訪問地址為 127.0.0.1/api，沒有匹配到這地址，那么就會(huì)被轉(zhuǎn)發(fā)到代理服務(wù)器127.0.0.2/api
module.exports={
devServer:{
proxy: "http://www.acfun.cn"
}
}
2：多代理控制
更多代理服務(wù)配置項(xiàng)搜索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，是否需要改變?cè)贾鳈C(jī)頭為目標(biāo)URL,
}
}
}
};
如：
當(dāng)前訪問地址為 xxx.xxx.xxx/search時(shí)，就會(huì)被轉(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, //超時(shí)配置 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)建的對(duì)象就自帶該方法了。
new Vue({
router,
render: h => h(App)
}).$mount("#app");
vue.config.js 配置文件
更多代理服務(wù)配置項(xiàng)搜索http-proxy-middleware查看
module.exports = {
devServer: {
proxy: {
'/search': {
target: 'http://www.acfun.cn',
ws: true,//是否代理websockets
changeOrigin: true // 設(shè)置同源 默認(rèn)false，是否需要改變?cè)贾鳈C(jī)頭為目標(biāo)URL
}
}
}
};
總結(jié)
以上所述是小編給大家介紹的vue-cli3 中跨域解決方案，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了vue3 vite配置跨域以及不生效問題,本文給大家分享完美解決方案，需要的朋友可以參考下2023-07-07
vue2+elementui進(jìn)行hover提示的使用
本文主要介紹了vue2+elementui進(jìn)行hover提示的使用，主要分為外部和內(nèi)部，具有一定的參考價(jià)值，感興趣的可以了解一下2021-11-11
vue3中reactive的對(duì)象清空所引發(fā)的問題解決方案(清空不了和清空之后再去賦值就賦值不了)
在使用reactive定義的變量時(shí),直接賦值會(huì)失去響應(yīng)式,為了清空?filters并確保響應(yīng)式,可以使用Object.assign({},?filters)或者遍歷對(duì)象逐個(gè)清除屬性,本文介紹vue3中reactive的對(duì)象清空所引發(fā)的問題解決方案(清空不了和清空之后再去賦值就賦值不了),感興趣的朋友一起看看吧2025-02-02
vue實(shí)現(xiàn)的請(qǐng)求服務(wù)器端API接口示例
這篇文章主要介紹了vue實(shí)現(xiàn)的請(qǐng)求服務(wù)器端API接口,結(jié)合實(shí)例形式分析了vue針對(duì)post、get、patch、put等請(qǐng)求的封裝與調(diào)用相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
vue.js移動(dòng)端app實(shí)戰(zhàn)1：初始配置詳解
這篇文章主要介紹了vue.js移動(dòng)端app實(shí)戰(zhàn)1：初始配置詳解,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
文章介紹了如何使用Vue原生上傳圖片,并在圖片上添加水印并壓縮圖片大小,首先,安裝了相應(yīng)的插件并進(jìn)行封裝,然后,介紹了添加水印的方法和上傳圖片的過程,最后,作者分享了自己的經(jīng)驗(yàn),并希望對(duì)大家有所幫助2025-01-01
這篇文章主要給大家介紹了關(guān)于在vue中如何使用node.js的相關(guān)資料,vue和nodejs經(jīng)常讓新手們感到困惑,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
在我們的平時(shí)的工作中,在前后端交互的時(shí)候,為了提高頁(yè)面的觀賞性和用戶的體驗(yàn),我們會(huì)在頁(yè)面上添加loading來阻止用戶操作來等待接口的返回,這篇文章主要給大家介紹了關(guān)于如何優(yōu)雅的控制全局loading顯示的相關(guān)資料,需要的朋友可以參考下2022-01-01
vue.js實(shí)現(xiàn)的綁定class操作示例
這篇文章主要介紹了vue.js實(shí)現(xiàn)的綁定class操作,結(jié)合實(shí)例形式分析了vue.js綁定class常見的3種操作技巧,需要的朋友可以參考下2018-07-07
這篇文章主要介紹了vue-plugin-hiprint 詳細(xì)使用說明,使用Vue.Draggable庫(kù)構(gòu)建可拖拽元素的示例,你可以根據(jù)具體需求和技術(shù)選型選擇適合的庫(kù)或方法來實(shí)現(xiàn)可拖拽元素的功能,需要的朋友可以參考下2023-08-08