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

proxyTable: {
 '/api': {
 target: 'http://192.168.2.139:8080/Mobile/Max', // 接口的域名
 // secure: false, // 如果是https接口，需要配置這個(gè)參數(shù)
 changeOrigin: true, // 如果接口跨域，需要進(jìn)行這個(gè)參數(shù)配置，為true的話，請(qǐng)求的header將會(huì)設(shè)置為匹配目標(biāo)服務(wù)器的規(guī)則（Access-Control-Allow-Origin）
 pathRewrite: {
 '^/api': '' //本身的接口地址沒有 '/api' 這種通用前綴，所以要rewrite，如果本身有則去掉
 }
 }
 },

使用：‘/api/getData'

在開發(fā)調(diào)試時(shí)，使用axios進(jìn)行數(shù)據(jù)交互時(shí)沒問題。但打包部署到服務(wù)器上發(fā)現(xiàn)404，跨域報(bào)錯(cuò)了。研究發(fā)現(xiàn)還需要進(jìn)行配置一下。

config文件夾還有2個(gè)文件dev.env.js和prod.env.js 分別是開發(fā)環(huán)境和生產(chǎn)環(huán)境配置文件，我們需要分別進(jìn)行修改。

dev.env.js（開發(fā)環(huán)境）

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(生產(chǎn)環(huán)境）

module.exports = {
 NODE_ENV: '"production"',
 VUE_APP_BASE_API:'"http://192.168.xx:xxx"' //項(xiàng)目api地址
}

注意屬性值里面要雙引號(hào)，否則會(huì)報(bào)錯(cuò)（Unterminated string constant）。

配置好之后，程序會(huì)自動(dòng)判斷當(dāng)前是開發(fā)還是生產(chǎn)環(huán)境，然后匹配VUE_APP_BASE_API。

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

每次使用：process.env.VUE_APP_BASE_API+api地址 會(huì)很麻煩，這時(shí)我們可以設(shè)置axios的baseuURL。

一般我們會(huì)自己寫個(gè)axios攔截器,生成一個(gè)axios對(duì)象，進(jìn)行token等安全驗(yàn)證。再把這個(gè)對(duì)象引用到main,js，掛載在vue實(shí)例上。這里不做相關(guān)贅述，網(wǎng)上有很多。

生成axios對(duì)象設(shè)置baseURL:process.env.VUE_APP_BASE_API

這是我項(xiàng)目中axios攔截器部分代碼

設(shè)置后，記得重新啟動(dòng)項(xiàng)目。我們調(diào)用數(shù)據(jù)就可以省去process.env.VUE_APP_BASE_API了 ，直接寫接口地址方法名字符串。

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

補(bǔ)充知識(shí)：vue-cli項(xiàng)目開發(fā)/生產(chǎn)環(huán)境代理實(shí)現(xiàn)跨域請(qǐng)求+webpack配置開發(fā)/生產(chǎn)環(huán)境的接口地址

一、開發(fā)環(huán)境中跨域　　

使用 Vue-cli 創(chuàng)建的項(xiàng)目，開發(fā)地址是 localhost:8080，需要訪問非本機(jī)上的接口http://10.1.0.34:8000/queryRole。

不同域名之間的訪問，需要跨域才能正確請(qǐng)求。

跨域的方法很多，通常都需要后臺(tái)配置，不過 Vue-cli 創(chuàng)建的項(xiàng)目，可以直接利用 Node.js 代理服務(wù)器，通過修改vue proxyTable接口實(shí)現(xiàn)跨域請(qǐng)求。在vue-cli項(xiàng)目中的config文件夾下的index.js配置文件中，修改前的dev：

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

　　只要修改里面的proxyTable: {}項(xiàng)

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

　　然后重啟項(xiàng)目npm run dev

　　請(qǐng)求數(shù)據(jù)時(shí)URL前加上“/api”就可以跨域請(qǐng)求了

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

1、參數(shù)proxyTable詳解：

　　 vue-cli的config文件里的參數(shù)：proxyTable，這個(gè)參數(shù)主要是一個(gè)地址映射表，你可以通過設(shè)置將復(fù)雜的url簡化，例如我們要請(qǐng)求的地址是api.xxxxxxxx.com/list/1，可以按照如下設(shè)置：

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

　　這樣我們在寫url的時(shí)候，只用寫成/list/1就可以代表api.xxxxxxxx.com/list/1. 　　

那么又是如何解決跨域問題的呢？其實(shí)在上面的'list'的參數(shù)里有一個(gè)changeOrigin參數(shù)，接收一個(gè)布爾值，如果設(shè)置為true，那么本地會(huì)虛擬一個(gè)服務(wù)端接收你的請(qǐng)求并代你發(fā)送該請(qǐng)求，這樣就不會(huì)有跨域問題了，當(dāng)然這只適用于開發(fā)環(huán)境。

增加的代碼如下所示：

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

　　 vue-cli的這個(gè)設(shè)置來自于其使用的插件http-proxy-middleware

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

　　深入了解的話可以看該插件配置說明，似乎還支持websocket，很強(qiáng)大的插件。

2、pathRewrite含義

　　用代理，首先你得有一個(gè)標(biāo)識(shí)，告訴他你這個(gè)連接要用代理，不然的話，可能你的 html，css，js這些靜態(tài)資源都跑去代理。所以我們只要接口用代理，靜態(tài)文件用本地。'/iclient': {}, 就是告訴node，我接口只要是'/iclient'開頭的才用代理。

所以你的接口就要這么寫 /iclient/xx/xx。最后代理的路徑就是 http://xxx.xx.com/iclient/xx/xx。

可是不對(duì)啊，我正確的接口路徑里面沒有/iclient啊，所以就需要 pathRewrite，用'^/iclient':'', 把'/iclient'去掉，這樣既能有正確標(biāo)識(shí)，又能在請(qǐng)求接口的時(shí)候去掉iclient。

當(dāng)然如果本身的接口中就有/iclient，那么就可以把pathRewrite這個(gè)參數(shù)去掉。

二、在生產(chǎn)環(huán)境中跨域　　

設(shè)置nginx配置文件：

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

三、設(shè)置不同的接口地址

平常我們團(tuán)隊(duì)開發(fā)時(shí)都在公司的局域網(wǎng)內(nèi)，調(diào)用接口也是局域網(wǎng)內(nèi)部的，但是項(xiàng)目上線時(shí)，請(qǐng)求接口是線上服務(wù)器端的，那么就有接口之間的來回切換問題。

在使用vue-cli搭建項(xiàng)目以后，做相關(guān)配置就可以實(shí)現(xiàn)，不用手動(dòng)更改接口路徑，也可以請(qǐng)求不同環(huán)境下的接口。

1、設(shè)置不同的接口地址

先找到以下文件

/config/dev.env.js

/config/prod.env.js

可以看到dev.env.js里面內(nèi)容如下

這是生產(chǎn)環(huán)境的參數(shù)配置，然后我們可以再上面文件加入一行代碼，如下：這就是本地測試環(huán)境請(qǐng)求后臺(tái)接口的域名

然后找到prod.env.js文件，如下：

我們加入一行代碼，如下：這是我們上傳服務(wù)器以后，請(qǐng)求后臺(tái)接口的域名

2、在代碼中調(diào)用設(shè)置好的參數(shù)：

比如我在本項(xiàng)目中重新封裝axios(api文件在/src/api/index.js中)，將配置好的接口地址作為baseURL拼接到接口路徑中，應(yīng)用參數(shù)部分如下：

最后重新啟動(dòng)項(xiàng)目就可以了，當(dāng)npm run dev的時(shí)候就運(yùn)行在生產(chǎn)環(huán)境，當(dāng)npm run build的時(shí)候就是正式的線上環(huán)境。

以上這篇VueCli生產(chǎn)環(huán)境打包部署跨域失敗的解決就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論