The onProxyReq event that configures proxy in vue-cli 3. 0 is not triggered

The

project is built under the vue-cli 3.0 version. I tried to get from localhost:6000/ . The data under rel= "nofollow noreferrer" > http://djk/. (also the path configured by the local backend). You need to set up a proxy and modify the request header when sending the request. However, when actually running, the onProxyReq event is not triggered.

this is my most simplified document structure

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

main.js file, which sends a request that requires an agent when the page is initialized:

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("-sharpapp")

vue.config.js file, I refer to

this is the result of the request for the page when I run it:

the request header was not set successfully. In fact, the onProxyReq method is not triggered. It puzzles me.
I have seen the http-proxy-middleware and http-proxy plug-in source code ins
ide. This event registers listening, but does not trigger execution when the request is made. Am I missing any key settings?

extra request: because the code runs on webpack-dev-server, what if I want to debug the middleware below (for example, http-proxy-midleware )? vue Devtool fits the code needed to debug the page, which obviously doesn"t apply here. I use webstorm to add breakpoints, but the code runs in memory, so there is no way to debug, without stopping. Or can I only run debug? on the node server?

can you give me some help or advice? Sister, first of all, thank you to all the great gods

Apr.16,2021

the judgment of the landlord is groundless.
the data you display in the request result does not reflect the agent process.
sends data from the browser, the data reaches the proxy server, and the proxy server sets the host and forwards it to the real server, which returns the data to the browser after the real server has finished processing.

the requests made by the browser you are displaying now correspond to those received by the browser.
the data you modified (header) is sent to the real server and will not be displayed in your browser.


modify the request header and configure axios

// axios.create([config])
const instance=axios.create({
  // `timeout` (0 )
  timeout:2000,
  // `headers` 
  headers:{
    'Content-Type':'application/x-www-form-urlencoded'
  }
});

because this request interception should be intercepted when the whole project is not built, instead of starting to intercept the request header


ask the relevant knowledge


has the landlord solved it

Menu