vue(2.x,3.0)配置跨域代理
導(dǎo)語:首先,每一個前端開發(fā)人員都應(yīng)該知道同源策略,同源策略是瀏覽器的一個安全功能,不同源的客戶端腳本在沒有明確授權(quán)的情況下,不能讀寫對方資源,所謂同源是指,域名,協(xié)議,端口相同。有一個不同時,都將請求不到資源,將無法“跨域”獲取資源。
vue3.0
從最新版開始,首先是在所有請求的文件中寫好請求
import Vue from 'vue' import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios, axios) let apiCrfCod = Vue.axios.create({ method: 'GET', baseURL: '/apis/' }) let apiResource = Vue.axios.create({ method: 'GET', baseURL: '/service/' }) getServiceChannels: (opts) => { return apiCrfCod({ url: '/rest/collection/getService/XXXX', // 此處寫地址,不具體舉例 params: { ...opts } }) }
在vue.config.js中配置代理
module.exports = { baseUrl: '', outputDir: 'dist', devServer: { // 配置服務(wù)器代理 proxy: { "/apis": { // 代理接口前綴為/apis的請求 "target": 'https://www.baidu.com/', // 對應(yīng)的代理地址 "secure": false, // 接受運(yùn)行在https上,默認(rèn)不接受 "changeOrigin": true, // 如果設(shè)置為true,那么本地會虛擬一個服務(wù)器接收你的請求并代你發(fā)送該請求,這樣就不會有跨域問題(只適合開發(fā)環(huán)境) "pathRewrite": { //重寫路徑 比如'/apis/aaa/ccc'重寫為'/aaa/ccc' '^/apis': '' } }, // 配置多個代理 "/service": { "target": 'https://www.google.com/', "secure": false, "changeOrigin": true, }, } }, }
vue2.X
請求還是按上述代碼,下面是配置代理部分
在config文件夾下的index.js中,配置proxyTable,原本的proxyTable中為空
proxyTable: { '/apis': { target: "https://www.baidu.com/", // 目標(biāo)地址 changeOrigin: true, // 是否跨域 pathRewrite: { // 重定向地址 '^/apis': '' } } },
上述就是vue3.0和2.x的配置跨域部分,記得配置完代理需重啟項目?。?!
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue路由對象屬性 .meta $route.matched詳解
今天小編就為大家分享一篇Vue路由對象屬性 .meta $route.matched詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11Vue實戰(zhàn)之vue登錄驗證的實現(xiàn)代碼
本篇文章主要介紹了Vue實戰(zhàn)之vue登錄的實現(xiàn)代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-10-10Vue-router結(jié)合transition實現(xiàn)app前進(jìn)后退動畫切換效果的實例
下面小編就為大家?guī)硪黄猇ue-router結(jié)合transition實現(xiàn)app前進(jìn)后退動畫切換效果的實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-10-10