vue-cli proxyTable跨域請求

在項目開發的時候，接口聯調的時候一般都是同域名下，但是當我們現在使用vue-cli進行項目打包的時候，會啟動我們本地的服務器，比如域名是http://localhost:9527 ，這種情況下我們再訪問其他的接口地址，就會存在跨域的問題，請求接口就會出現錯誤，因此我們需要在打包的時候配置一下。

1. 開發環境

在vue-cli項目中的config文件夾下的index.js配置文件中，dev長這樣子

dev: {
    // 靜態資源文件夾
    assetsSubDirectory: 'static',
    // 發布路徑
    assetsPublicPath: '/',
    // 代理配置表
    proxyTable: { },
    // 本地訪問 
    host: 'localhost', 
}

我們修改一下：

 // 只能在開發環境中進行跨域，上線了要進行反向代理nginx設置
     proxyTable: {
       //這里理解成用‘/api’代替target里面的地址，后面組件中我們掉接口時直接用api代替 比如我要調用'http://40.00.100.100:3002/user/add'，直接寫‘/api/user/add’即可
      '/api': {
         target: 'http://news.baidu.com',//你要跨域的網址  比如  'http://news.baidu.com',
        secure: true,  // 如果是https接口，需要配置這個參數
        changeOrigin: true,//這個參數是用來回避跨站問題的，配置完之后發請求時會自動修改http header里面的host，但是不會修改別的
        pathRewrite: {
          '^/api': '/api'//路徑的替換規則
          //這里的配置是正則表達式，以/api開頭的將會被用用‘/api’替換掉，假如后台文檔的接口是 /api/list/xxx
          //前端api接口寫：axios.get('/api/list/xxx') ， 被處理之后實際訪問的是：http://news.baidu.com/api/list/xxx
        }
      }
    },

打印出數據沒有報錯就說明已經跨域成功了

 

1.1 修改本地hosts文件

可以修改的本地的hosts，一勞永逸，也能解決本地測試后台無法向我們本地環境設置cookie的問題

 vi /etc/hosts 打開hosts文件，

127.0.0.1       localhost
255.255.255.255 broadcasthost
::1             localhost

localhost www.exaple.com 

 

2. 發布上線

上線要進行nginx反向代理設置，同時應區分環境變量，判斷是不是 development環境，是的話就是空的，否則就是配置文件里設置的根作用域。