鍍金池/ 問答/網(wǎng)絡(luò)安全/ 關(guān)于webpack配置proxyTable的幾個(gè)疑問？

關(guān)于webpack配置proxyTable的幾個(gè)疑問？

本地開發(fā)請(qǐng)求后臺(tái)接口的場(chǎng)景屢見不鮮，但是本地請(qǐng)求后臺(tái)接口會(huì)涉及到跨域的問題。
webpack配置proxy很好的解決了這個(gè)問題。
但是在使用的過(guò)程中，遇到幾個(gè)問題。翻看看了文檔、文章，說(shuō)的不是很通俗，有幾點(diǎn)疑惑，想在請(qǐng)教各位解釋一下

proxyTable: {
    '/api': {     
        target: 'https://cnodejs.org',
        changeOrigin: true,
        secure: false,  //target默認(rèn)情況下，不接受運(yùn)行在HTTPS上，且使用了無(wú)效證書的后端服務(wù)器。如果你想要接受, 則需設(shè)置該項(xiàng)為false
        pathRewrite: {
            '^/api': ''
        }        
    }
}

見識(shí)了proxyTable,說(shuō)下我的問題和疑惑：

首先請(qǐng)求方式為axios ，接口路徑為 https://cnodejs.org/api/v1/topics

axios.get('/api/v1/topics')
    .then((res)=> {console.log(res)})
    .catch((err) => {console.log(err)})

疑惑：

對(duì)于接口 https://cnodejs.org/api/v1/topics
proxyTable如下配置 請(qǐng)求時(shí)報(bào)404

proxyTable: {
    '/api': {
        target: 'https://cnodejs.org',
        secure: false,
        changeOrigin: true,
        pathRewrite: {
            '^/api': ''
        }  
    }
}

proxyTable如下配置 請(qǐng)求正常 200

proxyTable: {
   '/api': {
        target: 'https://cnodejs.org',
        secure: false,
    }
}

問題一：關(guān)于第一個(gè)'/api'

比如現(xiàn)在有接口
1、https://cnodejs.org/api/v1/topics
2、https://cnodejs/org/api/v2/topics
3、https://cnodejs/org/api/v2/topics
......

第一個(gè)'/api' 是以上接口的公共部分 /api 嗎？ 即將所有以 /api 開頭的請(qǐng)求通過(guò)jsonplaceholder代理?

問題二：關(guān)于pathRewrite

比如現(xiàn)在有接口 https://cnodejs.org/xxx/v1/topics
該接口沒有/api部分

pathRewrite: {
    '^/api': ''  // 它的作用是什么，？
}

上邊pathRewirte中的'^/api': '' 的作用是什么， 符號(hào)^的作用是什么？

回答
編輯回答
帥到炸

第一個(gè)問題，是屬于以此字段開頭的請(qǐng)求；
第二個(gè)區(qū)問題'^/api': '' 的作用是對(duì)/api改變其path，至于前面的^符號(hào)，是屬于正則判斷
文檔如下：
http-proxy-middleware options
option.pathRewrite: object/function, rewrite target's url path. Object-keys will be used as RegExp to match paths.

// rewrite path
pathRewrite: {'^/old/api' : '/new/api'}

// remove path
pathRewrite: {'^/remove/api' : ''}

// add base path
pathRewrite: {'^/' : '/basepath/'}

// custom rewriting
pathRewrite: function (path, req) { return path.replace('/api', '/base/api') }

鏈接描述

2018年7月19日 17:41