常見的跨域配置(/config/index.js):

proxyTable: {
 '/api': {
 target: 'http://192.168.2.139:8080/Mobile/Max',// 介面的域名
 // secure: false,// 如果是https介面，需要配置這個引數
 changeOrigin: true,// 如果介面跨域，需要進行這個引數配置，為true的話，請求的header將會設定為匹配目標伺服器的規則（Access-Control-Allow-Origin）
 pathRewrite: {
 '^/api': '' //本身的介面地址沒有 '/api' 這種通用字首，所以要rewrite，如果本身有則去掉
 }
 }
 },

使用：‘/api/getData'

在開發除錯時，使用axios進行資料互動時沒問題。但打包部署到伺服器上發現404，跨域報錯了。研究發現還需要進行配置一下。

config資料夾還有2個檔案dev.env.js和prod.env.js 分別是開發環境和生產環境配置檔案，我們需要分別進行修改。

dev.env.js（開發環境）

const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
 
module.exports = merge(prodEnv,{
 NODE_ENV: '"development"',VUE_APP_BASE_API:'"/api"'
})
prod.env.js(生產環境）

module.exports = {
 NODE_ENV: '"production"',VUE_APP_BASE_API:'"http://192.168.xx:xxx"' //專案api地址
}

注意屬性值裡面要雙引號，否則會報錯（Unterminated string constant）。

配置好之後，程式會自動判斷當前是開發還是生產環境，然後匹配VUE_APP_BASE_API。

VUE_APP_BASE_API可以通過process.env.VUE_APP_BASE_API來訪問。

每次使用：process.env.VUE_APP_BASE_API+api地址 會很麻煩，這時我們可以設定axios的baseuURL。

一般我們會自己寫個axios攔截器,生成一個axios物件，進行token等安全驗證。再把這個物件引用到main,js，掛載在vue例項上。這裡不做相關贅述，網上有很多。

生成axios物件設定baseURL:process.env.VUE_APP_BASE_API

這是我專案中axios攔截器部分程式碼

設定後，記得重新啟動專案。我們呼叫資料就可以省去process.env.VUE_APP_BASE_API了 ，直接寫介面地址方法名字串。

比如：this. $axios.get(process.env.VUE_APP_BASE_API+‘/getData' ) 變成 this. $axios.get(‘/getData' )

補充知識：vue-cli專案開發/生產環境代理實現跨域請求+webpack配置開發/生產環境的介面地址

一、開發環境中跨域　　

使用 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: {}項

proxyTable: { 
 '/api': { //代理地址 
 target: 'http://10.1.0.34:8000/',//需要代理的地址 
 changeOrigin: true,//是否跨域 
 secure: false,pathRewrite: { 
  '^/api': '/' //本身的介面地址沒有 '/api' 這種通用字首，所以要rewrite，如果本身有則去掉 
 }
 }
}

　　然後重啟專案npm run dev

　　請求資料時URL前加上“/api”就可以跨域請求了

self.$axios.get('/api/queryRole',{params: params}) 
 .then((res) => { 
 console.log(res); 
 }).catch((err) => { 
 console.log(err); 
 })

1、引數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，很強大的外掛。

2、pathRewrite含義

　　用代理，首先你得有一個標識，告訴他你這個連線要用代理，不然的話，可能你的 html，css，js這些靜態資源都跑去代理。所以我們只要介面用代理，靜態檔案用本地。'/iclient': {},就是告訴node，我介面只要是'/iclient'開頭的才用代理。

所以你的介面就要這麼寫 /iclient/xx/xx。最後代理的路徑就是 http://xxx.xx.com/iclient/xx/xx。

可是不對啊，我正確的介面路徑裡面沒有/iclient啊，所以就需要 pathRewrite，用'^/iclient':'',把'/iclient'去掉，這樣既能有正確標識，又能在請求介面的時候去掉iclient。

當然如果本身的介面中就有/iclient，那麼就可以把pathRewrite這個引數去掉。

二、在生產環境中跨域　　

設定nginx配置檔案：

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

三、設定不同的介面地址

平常我們團隊開發時都在公司的區域網內，呼叫介面也是區域網內部的，但是專案上線時，請求介面是線上伺服器端的，那麼就有介面之間的來回切換問題。

在使用vue-cli搭建專案以後，做相關配置就可以實現，不用手動更改介面路徑，也可以請求不同環境下的介面。

1、設定不同的介面地址

先找到以下檔案

/config/dev.env.js

/config/prod.env.js

可以看到dev.env.js裡面內容如下

這是生產環境的引數配置，然後我們可以再上面檔案加入一行程式碼，如下：這就是本地測試環境請求後臺介面的域名

然後找到prod.env.js檔案，如下：

我們加入一行程式碼，如下：這是我們上傳伺服器以後，請求後臺介面的域名

2、在程式碼中呼叫設定好的引數：

比如我在本專案中重新封裝axios(api檔案在/src/api/index.js中)，將配置好的介面地址作為baseURL拼接到介面路徑中，應用引數部分如下：

最後重新啟動專案就可以了，當npm run dev的時候就執行在生產環境，當npm run build的時候就是正式的線上環境。

以上這篇VueCli生產環境打包部署跨域失敗的解決就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。