快捷導(dǎo)航

vue（2.x，3.0）配置跨域代理

更新時(shí)間：2019年11月27日 11:11:36 作者：@deer

這篇文章主要介紹了vue（2.x，3.0）配置跨域代理，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

導(dǎo)語：首先，每一個(gè)前端開發(fā)人員都應(yīng)該知道同源策略，同源策略是瀏覽器的一個(gè)安全功能，不同源的客戶端腳本在沒有明確授權(quán)的情況下，不能讀寫對方資源，所謂同源是指，域名，協(xié)議，端口相同。有一個(gè)不同時(shí)，都將請求不到資源，將無法“跨域”獲取資源。

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,那么本地會虛擬一個(gè)服務(wù)器接收你的請求并代你發(fā)送該請求，這樣就不會有跨域問題（只適合開發(fā)環(huán)境）
  "pathRewrite": { //重寫路徑 比如'/apis/aaa/ccc'重寫為'/aaa/ccc'
   '^/apis': ''
   }
  },
  // 配置多個(gè)代理
  "/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的配置跨域部分，記得配置完代理需重啟項(xiàng)目?。?！

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue
跨域

相關(guān)文章

vuejs+element UI點(diǎn)擊編輯表格某一行時(shí)獲取內(nèi)容填入表單的示例
這篇文章主要介紹了vuejs+element UI點(diǎn)擊編輯表格某一行時(shí)獲取內(nèi)容填入表單的示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-10-10
Template?ref在Vue3中的實(shí)現(xiàn)原理詳解
這篇文章主要為大家介紹了Template?ref在Vue3中的實(shí)現(xiàn)原理示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
Vue計(jì)算屬性與監(jiān)視屬性實(shí)現(xiàn)方法詳解
最近在學(xué)習(xí)vue,學(xué)習(xí)中遇到了一些感覺挺重要的知識點(diǎn),感覺有必要整理下來,這篇文章主要給大家介紹了關(guān)于Vue.js中計(jì)算屬性、監(jiān)視屬性的相關(guān)資料,需要的朋友可以參考下
2022-08-08
vue?目錄樹的展開與關(guān)閉的實(shí)現(xiàn)
Vue作為一款流行的前端框架,提供了一種數(shù)據(jù)驅(qū)動的方式來實(shí)現(xiàn)目錄樹,本文主要介紹了vue?目錄樹的展開與關(guān)閉的實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下
2023-11-11
關(guān)于vue的element-ui web端引入高德地圖并獲取經(jīng)緯度
這篇文章主要介紹了關(guān)于vue的element-ui web端引入高德地圖并獲取經(jīng)緯度,高德地圖首先要去申請key和密鑰,文中提供了部分實(shí)現(xiàn)代碼和解決思路,感興趣的朋友可以學(xué)習(xí)一下
2023-04-04
Vue中的change事件無效問題及解決
這篇文章主要介紹了Vue中的change事件無效問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06
使用Vue3和Echarts?5繪制帶有立體感流線中國地圖(推薦收藏!)
最近接到一個(gè)需求是做一個(gè)中國地圖,下面這篇文章主要給大家介紹了關(guān)于如何使用Vue3和Echarts?5繪制帶有立體感流線中國地圖的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-04-04
vue中數(shù)字相加為字串轉(zhuǎn)化為數(shù)值的例子
今天小編就為大家分享一篇vue中數(shù)字相加為字串轉(zhuǎn)化為數(shù)值的例子，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
Vue項(xiàng)目localhost:8080無法訪問此網(wǎng)站，拒絕了我們的連接請求的解決方案
前端頁面使用的是vue,vue項(xiàng)目啟動成功,沒有任何報(bào)錯(cuò),服務(wù)控制臺已出現(xiàn)APP訪問地址,點(diǎn)擊訪問地址出現(xiàn)無法訪問此網(wǎng)站,拒絕了我們的連接請求,所以本文給大家介紹了Vue項(xiàng)目localhost:8080無法訪問此網(wǎng)站,拒絕了我們的連接請求的解決方案,需要的朋友可以參考下
2024-12-12
Vue中如何實(shí)現(xiàn)輪播圖的示例代碼
本篇文章主要介紹了Vue中如何實(shí)現(xiàn)輪播圖的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-07-07