背景：由於瀏覽器的同源政策，在不同協議、域名、埠時進行資料訪問將會出現跨域問題

常見的解決方式有以下幾種

jsonp跨域

利用script天然的跨域屬性進行跨域操作

jquery ajax實現

$.ajax({
  url: 'http://www.test.com:8888/getData',
  type: 'get',
  dataType: 'jsonp',  // 請求方式為jsonp
  jsonpCallback: "handleCallback",    // 自定義回撥函式名
  data: {}
})

proxy代理

原理：

因為客戶端請求服務端的資料是存在跨域問題的，而伺服器和伺服器之間可以相互請求資料，是沒有跨域的概念（如果伺服器沒有設定禁止跨域的許可權問題）

也就是說，我們可以配置一個代理的伺服器可以請求另一個伺服器中的資料，然後把請求出來的資料返回到我們的代理伺服器中，代理伺服器再返回資料給我們的客戶端，這樣我們就可以實現跨域訪問資料。

所以proxy的原理是 將域名傳送給本地的伺服器（啟動vue專案的服務,loclahost:8080），再由本地的伺服器去請求真正的伺服器。

背景：

在配置axios時通常會配置baseUrl,即

 axios.defaults.baseURL = 'http://××××××××××××/' // 預設地址

於是在寫axios時就可以省略基地址,例如

import axios from '@/utils/myaxios'
export function dictListByType (dictType) {
  return axios({
    // url: '/user/login',
    url: 'dict/get/dictListByType',
    params: {
      dictType
    }
  })
}
 

此時需要做的修改如下

axios.defaults.baseURL = '/api'//作用是我們每次傳送的請求都會帶一個/api的字首。

再在vue.config.js中進行配置

module.exports = {
   devServer: {
     proxy: { // 配置跨域
       '/api': {
         target: 'http://172.16.25.174:8043', // 這裡後臺的地址模擬的;應該填寫你們真實的後臺介面
         changOrigin: true, // 允許跨域
         pathRewrite: {
           '^/api': ''
         }
       }
     }
   },
  publicPath: './',
  lintOnSave: false,
  productionSourceMap: false
}