Vuecli3 configuration agent and solve problems encountered

Configuration method

Content description:

Here, the port of the front-end application is 8088, the port of the back-end application is 8052, and the domains are localhost

The backend interface ishttp://localhost:8052/Menu/xxxx。

Configuration modification

In the fileproxypart

devServer: {
    open: true, //Configure the automatic browser start    // host: '0.0.0.0',
    port: 8088,
    https: false,
    hot: false,
    hotOnly: false,
    // Set up a proxy    proxy: {
        '^/Menu/': {
            target: 'http://localhost:8052', // backend interface address to proxy            ws: true,        //If you want to proxy websockets, configure this parameter            secure: false,  // If it is the https interface, you need to configure this parameter            changeOrigin: true,  //Whether it crosses the domain            // pathRewrite: {
            //     '/Menu': '/'
            // }
        }
    }, 
    before: app => {}
},

Probable problems

The browser still reports a cross-domain problem, and the proxy fails to take effect

The configuration file for the request address is.The original configuration is as follows:

NODE_ENV = 'development'
VUE_APP_CURRENTMODE='dev'
//local
// This is the backend interfaceVUE_APP_API_HOST=http://localhost:8052/Menu

inVUE_APP_API_HOSTWhen requested for axios, the correspondingbaseURLaddress

// 
// create an axios instance
const service = ({
    baseURL: .VUE_APP_API_HOST, // api's base_url    timeout: 5000 // request timeout
})

At this time, the VUE project is started and the cross-domain problem is still reported. Because the requested address is stillhttp://localhost:8052At the beginning, there is no involvement of the configured proxy, and the requested address needs to be modified tohttp://localhost:8088,Right now

NODE_ENV = 'development'
VUE_APP_CURRENTMODE='dev'
//local
// This is the backend interfaceVUE_APP_API_HOST=http://localhost:8088/Menu

At this time, the agent will take effect, but an error of 404 may be reported.

Path issues that pathRewrite may be involved

This is only for the backend interface. The front-end requests in the browser have nothing to do with this. The relevant interfaces can be accessed with postman.

That is, you can use postman to test ithttp://localhost:8088/Menu/xxxxetc., because vue has already set its proxy.

(Note: The front-end interface here refers to the interface that XHR can see in the browser console when the vue project is running;

The backend interface refers to the (backend) interface after passing through the proxy. It itself is a backend interface, but after passing through the proxy, it can be called through postman using the IP and port of the front end. In some cases, there will be a path deviation between the front-end interface and the back-end interface causing the request 404)

Generally speaking, the configuration of pathRewrite is as follows, which is used to modify the address of the requested interface (backend interface)

pathRewrite: {
    '/Menu': '/'
}
// '^/api': '/api' // This interface is configured http://localhost:8088/api/login// '^/api': '/' This interface is configured http://localhost:8088/login

However, this is just a theoretical configuration. In actual use, I encountered the following problem:

If left in configuration'/Menu': '/', able to proxy successfully will becomehttp://localhost:8088/Menu/Menu/xxx

If removed, the URL that can proxy successfully ishttp://localhost:8088/Menu/xxxx

Even writing'/Menu': '/Menu'When the URL that can successfully proxy is alsohttp://localhost:8088/Menu/xxx

Contrary to theoretical configuration

Not sure if it is due to the version or other problems, if anyone encounters such a problem, you can consider modifying the configuration here. Since I only need to solve the cross-domain problem of the browser, I just need to ensure that the interface called by the front-end and the interface that the back-end can successfully proxie is consistent.

The above is the detailed content of Vuecli3 configuration agent and the solutions to the problems encountered. For more information about Vuecli3 configuration agent, please follow my other related articles!