在vue-cli 3.0配置proxy的onProxyReq事件沒(méi)有觸發(fā)

項(xiàng)目是在vue-cli 3.0版本下構(gòu)建的。我嘗試從localhost:6000/上獲取http://djk/...（也是本地后臺(tái)配好的路徑）下的數(shù)據(jù)，中間需設(shè)置代理，并且在發(fā)送請(qǐng)求的時(shí)候，修改請(qǐng)求頭?？墒菍?shí)際運(yùn)行的時(shí)候，onProxyReq事件并沒(méi)有觸發(fā)。

這是我最簡(jiǎn)化之后的文檔結(jié)構(gòu)

|-project
    |-node_modules
    |-public
      |-index.html
    |-src
      |-main.js
      |-App.vue
    |-package.json
    |-vue.config.js
    ...

main.js文件，在頁(yè)面初始化時(shí)發(fā)送一個(gè)需要代理的請(qǐng)求：

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'

new Vue({
    render:h=>h(App),
    mounted() {
        axios.get('/api/comment/index/my_comment_count')
            .then(response => console.log(response))
            .catch(error => console.log(error))
    }
}).$mount('#app')

vue.config.js 文件，我參考了這份文檔，新建vue.config.js文件并設(shè)置devServer.proxy。我期望能夠重新這是請(qǐng)求頭的Host和Cookie：

    module.exports = {
        devServer: {
            port: 6000,
            proxy: {
                '/api': {
                    target: 'http://djk',
                    changeOrigin: true,
                    pathRewrite: {
                        '^/api': ''
                    },
                    onProxyReq(proxyReq, req, res) {
                        proxyReq.setHeader('Host', 'djk')
                        proxyReq.setHeader('Cookie', 'thinkphp_show_page_trace=0|0; PHPSESSID=7hulrbae8g6tsn6ff7tpdhjsq0')
                    },
                }
            }
        }
    }

這是我運(yùn)行時(shí)，頁(yè)面的請(qǐng)求結(jié)果：
圖片描述

請(qǐng)求頭并沒(méi)有被成功設(shè)置。實(shí)際上，onProxyReq這個(gè)方法并沒(méi)有被觸發(fā)。這讓我很不解。
我看過(guò)里面的http-proxy-middleware和http-proxy插件源碼，這個(gè)事件是注冊(cè)了監(jiān)聽的，可是請(qǐng)求的時(shí)候卻沒(méi)有觸發(fā)執(zhí)行。我是否漏了什么關(guān)鍵設(shè)置呢？

額外請(qǐng)求下：因?yàn)榇a是跑在 webpack-dev-server上的，如果我想debug下面的中間件（例如http-proxy-midleware），要怎么辦呢？ vue Devtool 適合調(diào)試頁(yè)面所需的代碼，在這里顯然不適用。我用webstorm加斷點(diǎn)，可是代碼跑在內(nèi)存里，根本沒(méi)辦法debug，不帶停的。還是我只能在node服務(wù)器上運(yùn)行跑debug？

能給點(diǎn)幫助或意見嗎？妹子先謝謝各路大神

回答

編輯回答

澐染

修改請(qǐng)求頭可以配置一下axios

//創(chuàng)建實(shí)例 axios.create([config])
const instance=axios.create({
  // `timeout` 指定請(qǐng)求超時(shí)的毫秒數(shù)(0 表示無(wú)超時(shí)時(shí)間)
  timeout:2000,
  // `headers` 是即將被發(fā)送的自定義請(qǐng)求頭
  headers:{
    'Content-Type':'application/x-www-form-urlencoded'
  }
});

2017年7月11日 13:01

編輯回答