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

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

本地開發(fā)請求后臺接口的場景屢見不鮮,但是本地請求后臺接口會涉及到跨域的問題。
webpack配置proxy很好的解決了這個問題。
但是在使用的過程中,遇到幾個問題。翻看看了文檔、文章,說的不是很通俗,有幾點疑惑,想在請教各位解釋一下

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

見識了proxyTable,說下我的問題和疑惑:

首先請求方式為axios ,接口路徑為 https://cnodejs.org/api/v1/topics

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

疑惑:

對于接口 https://cnodejs.org/api/v1/topics
proxyTable如下配置 請求時報404

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

proxyTable如下配置 請求正常 200

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

問題一:關(guān)于第一個'/api'

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

第一個'/api' 是以上接口的公共部分 /api 嗎? 即將所有以 /api 開頭的請求通過jsonplaceholder代理?

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

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

pathRewrite: {
    '^/api': ''  // 它的作用是什么,?
}

上邊pathRewirte中的'^/api': '' 的作用是什么, 符號^的作用是什么?

回答
編輯回答
帥到炸

第一個問題,是屬于以此字段開頭的請求;
第二個區(qū)問題'^/api': '' 的作用是對/api改變其path,至于前面的^符號,是屬于正則判斷
文檔如下:
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