Vue項目中解決跨域問題

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

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

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
}