解決vue-cli項目開發中跨域問題

1、開發環境中跨域

使用 Vue-cli 建立的項目，開發地址是 localhost:8080，須要訪問非本機上的接口http://10.1.0.34:8000/queryRole。不一樣域名之間的訪問，須要跨域才能正確請求。跨域的方法不少，一般都須要後臺配置，不過 Vue-cli 建立的項目，能夠直接利用 Node.js 代理服務器，經過修改vue proxyTable接口實現跨域請求。在vue-cli項目中的config文件夾下的index.js配置文件中，修改前的dev：

dev: {  
    env: require('./dev.env'),  
    port: 8080,  
    autoOpenBrowser: true,  
    assetsSubDirectory: 'static',  
    assetsPublicPath: '/',  
    proxyTable: {}, 
    cssSourceMap: false  
  }

只要修改裏面的proxyTable: {}項

dev: {

    // 靜態資源文件夾
    assetsSubDirectory: 'static',

    // 發佈路徑
    assetsPublicPath: '/',

    // 代理配置表，在這裏能夠配置特定的請求代理到對應的API接口
    // 例如將'localhost:8080/api/xxx'代理到'www.example.com/api/xxx'
    // 使用方法：https://vuejs-templates.github.io/webpack/proxy.html
    proxyTable: {
      '/api': {
        target: 'http://xxxxxx.com', // 接口的域名
        // secure: false,  // 若是是https接口，須要配置這個參數
        changeOrigin: true, // 若是接口跨域，須要進行這個參數配置，爲true的話，請求的header將會設置爲匹配目標服務器的規則（Access-Control-Allow-Origin）

  pathRewrite: { '^/api': '' //自己的接口地址沒有 '/api' 這種通用前綴，因此要rewrite，若是自己有則去掉 

 } } }, // 本地訪問 http://localhost:8080 host: 'localhost', // can be overwritten by process.env.HOST

而後重啓項目npm run dev

注意：

接口地址本來是 /save/index，可是爲了匹配代理地址，在前面加一個 /api,  所以接口地址須要寫成這樣的便可生效 /api/save/index。

'/api' 爲匹配項，target 爲被請求的地址，由於在 ajax 的 url 中加了前綴 '/api'，而本來的接口是沒有這個前綴的，因此須要經過 pathRewrite 來重寫地址，將前綴 '/api' 轉爲 '/'。若是自己的接口地址就有 '/api' 這種通用前綴，就能夠把 pathRewrite 刪掉。

一、參數proxyTable詳解：

vue-cli的config文件裏的參數：proxyTable，這個參數主要是一個地址映射表，你能夠經過設置將複雜的url簡化，例如咱們要請求的地址是api.xxxxxxxx.com/list/1，能夠按照以下設置：

proxyTable: {
  '/list': {
    target: 'http://api.xxxxxxxx.com',
    pathRewrite: {
      '^/list': '/list'
    }
  }
}

這樣咱們在寫url的時候，只用寫成/list/1就能夠表明api.xxxxxxxx.com/list/1.
那麼又是如何解決跨域問題的呢？其實在上面的'list'的參數裏有一個changeOrigin參數，接收一個布爾值，若是設置爲true，那麼本地會虛擬一個服務端接收你的請求並代你發送該請求，這樣就不會有跨域問題了，固然這隻適用於開發環境。增長的代碼以下所示：

proxyTable: {
  '/list': {
    target: 'http://api.xxxxxxxx.com',
    changeOrigin: true,
    pathRewrite: {
      '^/list': '/list'
    }
  }
}

vue-cli的這個設置來自於其使用的插件http-proxy-middleware

github：https://github.com/chimurai/http-proxy-middleware

深刻了解的話能夠看該插件配置說明，彷佛還支持websocket，很強大的插件。

二、pathRewrite含義：

用代理，首先你得有一個標識，告訴他你這個鏈接要用代理，否則的話，可能你的 html，css，js這些靜態資源都跑去代理。因此咱們只要接口用代理，靜態文件用本地。'/iclient': {}, 就是告訴node，我接口只要是'/iclient'開頭的才用代理。因此你的接口就要這麼寫 /iclient/xx/xx。最後代理的路徑就是 http://xxx.xx.com/iclient/xx/xx。但是不對啊，我正確的接口路徑裏面沒有/iclient啊，因此就須要pathRewrite，用'^/iclient':'', 把'/iclient'去掉，這樣既能有正確標識，又能在請求接口的時候去掉iclient。固然若是自己的接口中就有/iclient，那麼就能夠把pathRewrite這個參數去掉。

2、在生產環境中跨域

設置nginx配置文件：

location /api {
    add_header 'Access-Control-Allow-Origin' '*';
    proxy_pass http://fanyi.baidu.com/v2transapi;
}

 

3、設置不一樣的接口地址

　　日常咱們團隊開發時都在公司的局域網內，調用接口也是局域網內部的，可是項目上線時，請求接口是線上服務器端的，那麼就有接口之間的來回切換問題。

　　在使用vue-cli搭建項目之後，作相關配置就能夠實現，不用手動更改接口路徑，也能夠請求不一樣環境下的接口。

　　一、設置不一樣的接口地址

　　先找到如下文件

　　/config/dev.env.js

　　/config/prod.env.js

　　能夠看到dev.env.js裏面內容以下

這是生產環境的參數配置，而後咱們能夠再上面文件加入一行代碼，以下：這就是本地測試環境請求後臺接口的域名

而後找到prod.env.js文件，以下：

咱們加入一行代碼，以下：這是咱們上傳服務器之後，請求後臺接口的域名

二、在代碼中調用設置好的參數：

好比我在本項目中從新封裝axios(api文件在/src/api/index.js中)，將配置好的接口地址做爲baseURL拼接到接口路徑中，應用參數部分以下：

最後從新啓動項目就能夠了，當npm run dev的時候就運行在生產環境，當npm run build的時候就是正式的線上環境。

 後端程序代理

有一種方法不需要後端的配合和修改服務器配置 ，咱們本身就能夠作到。就是咱們本身啓一個後端程序作代理。而後把全部的請求轉發到服務器。這裏要用到node的一個包http-proxy-middleware。關鍵代碼(express)以下