vue優雅的解決跨域,路由衝突問題

2021-09-02 22:25:06 字數 1781 閱讀 7357

proxytable: ,

'/users/*':

},

這種配置方式在一定程度上解決了跨域問題,但是會帶來一些問題,

比如我們的vue 路由 也命名為 goods,這時候就會產生了衝突,

如果專案中介面很多,都在這裡配置是很麻煩的,也容易產生路由衝突。

把以上配置統一前面加上 /api/

proxytable: ,

},

proxytable: 

},},

logout())

},getgoods())

}

在入口檔案裡面配置如下:

import axios from 'axios'

import vueaxios from 'vue-axios'

vue.use(vueaxios, axios)

axios.defaults.baseurl = 'api'

如果這配置 'api/' 會預設讀取本地的域

在config 資料夾裡面新建乙個 api.config.js 配置檔案

const ispro = object.is(process.env.node_env, 'production')

module.exports =

import apiconfig from '../config/api.config'

import axios from 'axios'

import vueaxios from 'vue-axios'

vue.use(vueaxios, axios)

axios.defaults.baseurl = apiconfig.baseurl

logout())

},getgoods())

}

proxytable: 

},},

在config 資料夾裡面新建乙個 api.config.js 配置檔案

const ispro = object.is(process.env.node_env, 'production')

module.exports =

關於生產和開發配置不太了解

可以去 dev-server.js 裡面看配置**

const webpackconfig = (process.env.node_env === 'testing' || process.env.node_env === 'production') ?

require('./webpack.prod.conf') :

require('./webpack.dev.conf')

import apiconfig from '../config/api.config'

import axios from 'axios'

import vueaxios from 'vue-axios'

vue.use(vueaxios, axios)

axios.defaults.baseurl = apiconfig.baseurl

logout())

},getgoods())

}

vue解決線上跨域的問題 vue解決跨域問題

開發模式 要知道,跨域這個行為是瀏覽器禁止的,但是服務端並不禁止。使用proxytable的原理就是將網域名稱傳送給本地的伺服器,再由本地的伺服器去請求真正的伺服器。開啟config index.js,修改dev裡的proxytable proxytable target 你要訪問的伺服器網域名稱 ...

vue使用proxyTable解決跨域問題

廢話不多說,直接上主題。當後端給我們乙個固定介面ip,介面ip baseurl 登入介面 login login 開始設定跨域 1,如果重寫位址,重寫的位址最好是後端已給的固定位址,此處為 baidu proxytable csssourcemap false 使用 此時 api 代表的就是 api...

Vue解決跨域

vue.prototype.ajax axios封裝axios import axios from axios import qs from qs import router from router index import vue from vue import from vant 配置全域性的a...