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

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

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

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

main.js文件，在頁面初始化時發(fā)送一個需要代理的請求：

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。我期望能夠重新這是請求頭的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')
                    },
                }
            }
        }
    }

這是我運行時，頁面的請求結(jié)果：
圖片描述

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

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

能給點幫助或意見嗎？妹子先謝謝各路大神

回答

編輯回答

澐染

修改請求頭可以配置一下axios

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

2017年7月11日 13:01

編輯回答