為什么會出現跨域：

瀏覽器訪問非同源的網址時,會被限制訪問,出現跨域問題.

常見的跨域有三種：

• jspn跨域，原理：動態生成script標簽，通過script標簽引入接口地址(因為script標簽不存在跨域的)
• cors跨域(后端開啟) ：全稱 “跨域資源共享”，原理：它允許瀏覽器向跨源服務器，發出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制
• vue代理服務器proxy跨域：通過請求本地的服務器，然后本地的服務器再去請求遠程的服務器(后端部署接口的服務器)，最后本地服務器再將請求回來的數據返回給瀏覽器(本地服務器和瀏覽器之前不存在跨域)
  兩個關鍵點：
  本地服務器(利用node.js創建的本地服務器進行代理,也叫代理服務器)和瀏覽器之間不存在跨域
  服務器和服務器之間不存在跨域

話不多說，直接上代碼：

首先創建一個 vue.config.js文件

// 假設要請求的接口是：http://40.00.100.100:3002/api/user/add module.exports = {devServer:{host:'localhost', // 本地主機port:5000, // 端口號的配置open:true, // 自動打開瀏覽器proxy:{'/api': { // 攔截以 /api 開頭的接口target: 'http://40.00.100.100:3002',//設置你調用的接口域名和端口號 別忘了加httpchangeOrigin: true, //這里true表示實現跨域secure: false, // 如果是https接口，需要配置這個參數pathRewrite: {'^/api':'/' //這里理解成用‘/api’代替target里面的地址，后面組件中我們掉接口時直接用api代替 比如我要調用'http://40.00.100.100:3002/api/user/add'，直接寫‘/api/user/add’即可}},// 假如又有一個接口是：http://40.00.100.100:3002/get/list/add// 那就再配置一個 get的，如下：'/get': { // 攔截以 /get 開頭的接口target: 'http://40.00.100.100:3002',//設置你調用的接口域名和端口號 別忘了加httpchangeOrigin: true, //這里true表示實現跨域secure: false, // 如果是https接口，需要配置這個參數pathRewrite: {'^/api':'/' //這里理解成用‘/api’代替target里面的地址，}}// 調用的時候直接 /get/list/add 就可以了}}}// 注意：修改了配置文件后一定要重啟才會生效;

我們可以利用axios的baseUrl直接默認值是 api，這樣我們每次訪問的時候，自動補上這個api前綴，就不需要我們自己手工在每個接口上面寫這個前綴了
在入口文件里面配置如下：

import axios from 'axios'Vue.prototype.$http = axios axios.defaults.baseURL = 'api' // 后面發現，其實不加這個感覺也好像可以如果這配置 'api/' 會默認讀取本地的域

如果只是開發環境測試，上面那種就足夠了，如果區分生產和開發環境
就需要如下配置

分環境配置跨域：

創建一個 api.config.js 文件(其實隨便命名都可以)

const isPro = Object.is(process.env.NODE_ENV, 'production') // 如果是生產環境，就用線上的接口; module.exports = {baseUrl: isPro ? 'http://www.vnshop.cn/api/' : 'api/' }

然后在main.js 里面引入,這樣可以保證動態的匹配生產和開發的定義前綴

import apiConfig from './api.config'Vue.prototype.$http = axios import axios from 'axios'axios.defaults.baseURL = apiConfig.baseUrl

經過上面配置后，在dom里面可以這樣輕松的訪問,也不需要在任何組件里面引入axios模塊了

async getData(){const res = await this.$http.get('/api/user/add');console.log(res);},

小結：
代理跨域的主要方式是利用服務器請求服務器的方式避過跨域問題來實現的.大概的流程: 瀏覽器===>代理服務器===>目標服務器.

若有不對的地方，請不吝指出，同時也歡迎留言咨詢，謝謝~

總結

以上是生活随笔為你收集整理的vue前端跨域解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。