欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue(2.x,3.0)配置跨域代理

 更新時間:2019年11月27日 11:11:36   作者:@deer  
這篇文章主要介紹了vue(2.x,3.0)配置跨域代理,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

導(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-cli axios請求方式及跨域處理問題

    vue-cli axios請求方式及跨域處理問題

    這篇文章主要介紹了vue-cli axios請求方式及跨域處理問題,文中還給大家提到了vue中axios解決跨域問題和攔截器使用,非常不錯,具有參考借鑒價值,需要的朋友參考下吧
    2018-03-03
  • 解決vuejs項目里css引用背景圖片不能顯示的問題

    解決vuejs項目里css引用背景圖片不能顯示的問題

    今天小編就為大家分享一篇解決vuejs項目里css引用背景圖片不能顯示的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • Vue基礎(chǔ)語法知識梳理下篇

    Vue基礎(chǔ)語法知識梳理下篇

    這篇文章主要介紹了Vue基礎(chǔ)語法知識梳理,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-12-12
  • Vue路由對象屬性 .meta $route.matched詳解

    Vue路由對象屬性 .meta $route.matched詳解

    今天小編就為大家分享一篇Vue路由對象屬性 .meta $route.matched詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11
  • Vue實戰(zhàn)之vue登錄驗證的實現(xiàn)代碼

    Vue實戰(zhàn)之vue登錄驗證的實現(xiàn)代碼

    本篇文章主要介紹了Vue實戰(zhàn)之vue登錄的實現(xiàn)代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-10-10
  • vue-router 路由傳參用法實例分析

    vue-router 路由傳參用法實例分析

    這篇文章主要介紹了vue-router 路由傳參用法,結(jié)合實例形式分析了vue-router 路由傳參基本使用方法及操作注意事項,需要的朋友可以參考下
    2020-03-03
  • Vue綁定對象與數(shù)組變量更改后無法渲染問題解決

    Vue綁定對象與數(shù)組變量更改后無法渲染問題解決

    這篇文章主要介紹了Vue綁定對象與數(shù)組變量更改后無法渲染問題解決,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下
    2021-09-09
  • Vue-router結(jié)合transition實現(xiàn)app前進(jìn)后退動畫切換效果的實例

    Vue-router結(jié)合transition實現(xiàn)app前進(jìn)后退動畫切換效果的實例

    下面小編就為大家?guī)硪黄猇ue-router結(jié)合transition實現(xiàn)app前進(jìn)后退動畫切換效果的實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-10-10
  • Vue?h函數(shù)的使用詳解

    Vue?h函數(shù)的使用詳解

    本文主要介紹了Vue?h函數(shù)的使用詳解,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-12-12
  • Vue2.0實現(xiàn)自適應(yīng)分辨率

    Vue2.0實現(xiàn)自適應(yīng)分辨率

    這篇文章主要為大家詳細(xì)介紹了Vue2.0實現(xiàn)自適應(yīng)分辨率,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-11-11

最新評論