vue項(xiàng)目打包后proxyTable代理失效

原因

在vue.config.js中配置了proxy跨域后執(zhí)行npm run build打包部署到服務(wù)器上會(huì)報(bào)跨域問(wèn)題，為什么會(huì)報(bào)錯(cuò)呢？因?yàn)榫幾g打包后，前端頁(yè)面成為了單獨(dú)的靜態(tài)資源，代理服務(wù)器devServer.proxy被抽離出去了。

也就是說(shuō)，devServer.proxy不會(huì)一起打包到dist文件夾下，所以相當(dāng)于我們沒(méi)有配置代理服務(wù)器！！

怎么解決呢？資源要被訪(fǎng)問(wèn)，那必須要有一個(gè)代理服務(wù)器來(lái)裝載它。我們部署上線(xiàn)最常見(jiàn)的就是使用nginx進(jìn)行反向代理，只需要修改nginx配置文件即可。

解決方案

示例如下：

第一步、找到項(xiàng)目的配置文件。

第二步、在其中添加下面這段代碼，根據(jù)自己實(shí)際情況修改即可：

location /api{
        rewrite ^.+api/?(.*)$ /$1 break;    
        //可選參數(shù)，正則驗(yàn)證地址
        include uwsgi_params;    
        //可選參數(shù)，uwsgi是服務(wù)器和服務(wù)端應(yīng)用程序的通信協(xié)議，規(guī)定了怎么把請(qǐng)求轉(zhuǎn)發(fā)給應(yīng)用程序和返回
        proxy_pass http://www.test.com;    
        // 接口地址
}

vue使用proxyTable實(shí)現(xiàn)多重跨域

眾所周知，vue跨域有很多種解決方案，這里主要講述一下使用proxyTable時(shí)遇到的一些問(wèn)題

• vue環(huán)境：腳手架cli3.0
• 本地地址：http://localhost:96
• 修改文件：vue.config.js

module.exports = {
? ? devServer: {
? ? ? ? proxy: {
? ? ? ? ? ? 'aaa': { //跨域標(biāo)識(shí)
?? ??? ??? ??? ?target: 'http://www.aaa.com/', //跨域地址
? ? ? ? ? ? ? ? changeOrigin: true, //是否允許跨域
? ? ? ? ? ? ? ? pathRewrite: {
? ? ? ? ? ? ? ? ? ? '^/aaa': '' //跨域地址重寫(xiě)
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? 'bbb': { //跨域標(biāo)識(shí)
?? ??? ??? ??? ?target: 'http://www.bbb.com/', //跨域地址
? ? ? ? ? ? ? ? changeOrigin: true, //是否允許跨域
? ? ? ? ? ? ? ? pathRewrite: {
? ? ? ? ? ? ? ? ? ? '^/bbb': '' //跨域地址重寫(xiě)
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? },
? ? },
}

跨域標(biāo)識(shí)：跨域配置的基本標(biāo)識(shí)，必填，可自定義

• 使用 axios.get('/aaa/api/getuser') 時(shí)，真實(shí)的請(qǐng)求地址就是http://www.aaa.com/api/getuser
• 使用 axios.get('/bbb/api/getuser') 時(shí)，真實(shí)的請(qǐng)求地址就是http://www.bbb.com/api/getuser

pathRewrite： '^/aaa': ''冒號(hào)前面的字母必須跟跨域標(biāo)識(shí)一致，否則跨域失敗，后面的內(nèi)容可以自定義

• '^/aaa': ''為空時(shí)，真實(shí)的請(qǐng)求地址為http://www.aaa.com/api/getuser
• '^/aaa': 'zdy'不為空時(shí)，真實(shí)的請(qǐng)求地址為http://www.aaa.com/zdy/api/getuser

有一點(diǎn)需要注意，不管怎么設(shè)置，我們?cè)跒g覽器控制臺(tái)里看到的請(qǐng)求地址還是http://localhost:96/aaa/api/getuser

那么問(wèn)題來(lái)了，我們?cè)谑褂媚_手架開(kāi)發(fā)時(shí)，會(huì)涉及到一個(gè)開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境的全局配置

axios.defaults.baseURL = process.env.NODE_ENV === 'production' ? '/' : '/aaa';

這段代碼的含義是當(dāng)處于開(kāi)發(fā)環(huán)境時(shí)，使用axios.get('/api/getuser')時(shí)等于在地址前面加上’/aaa‘變成axios.get('/aaa/api/getuser') ，由于這是全局配置，不能去修改，所以我們想要跨域請(qǐng)求www.bbb.com時(shí)使如果用axios.get('bbb/api/getuser')，那真實(shí)地址會(huì)變成http://www.aaa.com/bbb/api/getuser，解決代碼如下

module.exports = {
? ? devServer: {
? ? ? ? proxy: {
? ? ? ? ? ? 'aaa/bbb': { //跨域標(biāo)識(shí)
?? ??? ??? ??? ?target: 'http://www.bbb.com/', //跨域地址
? ? ? ? ? ? ? ? changeOrigin: true, //是否允許跨域
? ? ? ? ? ? ? ? pathRewrite: {
? ? ? ? ? ? ? ? ? ? '^/aaa/bbb': '' //跨域地址重寫(xiě)
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? 'aaa': { //跨域標(biāo)識(shí)
?? ??? ??? ??? ?target: 'http://www.aaa.com/', //跨域地址
? ? ? ? ? ? ? ? changeOrigin: true, //是否允許跨域
? ? ? ? ? ? ? ? pathRewrite: {
? ? ? ? ? ? ? ? ? ? '^/aaa': '' //跨域地址重寫(xiě)
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? },
? ? },
}

因?yàn)榇嬖谌峙渲胊xios.defaults.baseURL = process.env.NODE_ENV === 'production' ? '/' : '/aaa';那么

• 使用 axios.get('/api/getuser') 時(shí)會(huì)變成axios.get('aaa/api/getuser') ，因?yàn)榇嬖?rsquo;aaa‘，程序會(huì)執(zhí)行第二個(gè)配置，真實(shí)的請(qǐng)求地址就是http://www.aaa.com/api/getuser
• 使用 axios.get('/bbb/api/getuser') 時(shí)會(huì)變成axios.get('aaa/bbb/api/getuser') ，因?yàn)榇嬖?rsquo;aaa/bbb‘，程序會(huì)執(zhí)行第一個(gè)配置，真實(shí)的請(qǐng)求地址就是http://www.bbb.com/api/getuser

需要注意的的是兩個(gè)配置的順序不能改，因?yàn)榇a的執(zhí)行順序是由上而下的，如果’aaa‘放在上面，'aaa/bbb'在下面，那么使用

axios.get('/bbb/api/getuser')時(shí)程序就會(huì)判斷第一個(gè)配置符合條件然后執(zhí)行第一個(gè)配置變成axios.get('aaa/bbb/api/getuser'),最終真實(shí)請(qǐng)求地址還是http://www.aaa.com/bbb/api/getuser

以上代碼都是建立在本地環(huán)境的基礎(chǔ)上，打包上線(xiàn)后則需要使用nginx配合了。 

總結(jié)

這些僅為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論