vue項目打包后proxyTable代理失效

原因

在vue.config.js中配置了proxy跨域后執(zhí)行npm run build打包部署到服務器上會報跨域問題，為什么會報錯呢？因為編譯打包后，前端頁面成為了單獨的靜態(tài)資源，代理服務器devServer.proxy被抽離出去了。

也就是說，devServer.proxy不會一起打包到dist文件夾下，所以相當于我們沒有配置代理服務器??！

怎么解決呢？資源要被訪問，那必須要有一個代理服務器來裝載它。我們部署上線最常見的就是使用nginx進行反向代理，只需要修改nginx配置文件即可。

解決方案

示例如下：

第一步、找到項目的配置文件。

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

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

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

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

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

module.exports = {
? ? devServer: {
? ? ? ? proxy: {
? ? ? ? ? ? 'aaa': { //跨域標識
?? ??? ??? ??? ?target: 'http://www.aaa.com/', //跨域地址
? ? ? ? ? ? ? ? changeOrigin: true, //是否允許跨域
? ? ? ? ? ? ? ? pathRewrite: {
? ? ? ? ? ? ? ? ? ? '^/aaa': '' //跨域地址重寫
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? 'bbb': { //跨域標識
?? ??? ??? ??? ?target: 'http://www.bbb.com/', //跨域地址
? ? ? ? ? ? ? ? changeOrigin: true, //是否允許跨域
? ? ? ? ? ? ? ? pathRewrite: {
? ? ? ? ? ? ? ? ? ? '^/bbb': '' //跨域地址重寫
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? },
? ? },
}

跨域標識：跨域配置的基本標識，必填，可自定義

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

pathRewrite： '^/aaa': ''冒號前面的字母必須跟跨域標識一致，否則跨域失敗，后面的內容可以自定義

• '^/aaa': ''為空時，真實的請求地址為http://www.aaa.com/api/getuser
• '^/aaa': 'zdy'不為空時，真實的請求地址為http://www.aaa.com/zdy/api/getuser

有一點需要注意，不管怎么設置，我們在瀏覽器控制臺里看到的請求地址還是http://localhost:96/aaa/api/getuser

那么問題來了，我們在使用腳手架開發(fā)時，會涉及到一個開發(fā)環(huán)境和生產(chǎn)環(huán)境的全局配置

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

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

module.exports = {
? ? devServer: {
? ? ? ? proxy: {
? ? ? ? ? ? 'aaa/bbb': { //跨域標識
?? ??? ??? ??? ?target: 'http://www.bbb.com/', //跨域地址
? ? ? ? ? ? ? ? changeOrigin: true, //是否允許跨域
? ? ? ? ? ? ? ? pathRewrite: {
? ? ? ? ? ? ? ? ? ? '^/aaa/bbb': '' //跨域地址重寫
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? 'aaa': { //跨域標識
?? ??? ??? ??? ?target: 'http://www.aaa.com/', //跨域地址
? ? ? ? ? ? ? ? changeOrigin: true, //是否允許跨域
? ? ? ? ? ? ? ? pathRewrite: {
? ? ? ? ? ? ? ? ? ? '^/aaa': '' //跨域地址重寫
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? },
? ? },
}

因為存在全局配置axios.defaults.baseURL = process.env.NODE_ENV === 'production' ? '/' : '/aaa';那么

• 使用 axios.get('/api/getuser') 時會變成axios.get('aaa/api/getuser') ，因為存在’aaa‘，程序會執(zhí)行第二個配置，真實的請求地址就是http://www.aaa.com/api/getuser
• 使用 axios.get('/bbb/api/getuser') 時會變成axios.get('aaa/bbb/api/getuser') ，因為存在’aaa/bbb‘，程序會執(zhí)行第一個配置，真實的請求地址就是http://www.bbb.com/api/getuser

需要注意的的是兩個配置的順序不能改，因為代碼的執(zhí)行順序是由上而下的，如果’aaa‘放在上面，'aaa/bbb'在下面，那么使用

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

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

總結

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

最新評論