Detailed explanation of vue-cli interface proxy configuration

This article introduces the configuration of the vue-cli interface proxy and shares it with you, as follows:

Some students have questions when configuring the interface proxy. Why is the interface still not working after I successfully configured it? In fact, the proxy has been successful. It is just that the interface access address rules are not clear.

The following is a local test as a guide to everyone

Some basic operations will not be introduced here

Find the vue-cli config folder. This is a file that configures interface rules. Created in the same directory. Some learning habits are directly modified in the original file. It is also possible, but it is recommended to use a new file:

 = {
  proxyList: {
    '/api': {
      target: 'http://localhost:3000', (This is the location of the proxy interface)      changeOrigin: true,（Allow cross-domain，If this doesn't write，There will be a cross-domain error when calling the interface interface, saying that the request header is missing.）
      pathRewrite: {'^/api': '' } （The routing rules are detailed below）
    }
  }
}

****Routing Rules*******

After the above code is executed, it means that as long as we see ‘/api’ in the interface, it will automatically become the address we set. Then we can standardize the interface writing standards when setting it. This property is used. pathRewrite path rewrite {'^/api': '' } refers to what you want the route to become. If it is empty, then when parsing, if our interface writes $('/api/good') then we will see the access of /good on the server. If there is no corresponding route matching on the server at this time, the client service will display an error, and the port number is still the port number of the client, so many students have the illusion that it does not work. Similarly, if we set {'^/api': '/api' }, we will see the interface access of /api/goods on the server, which means that not only automatically parsing /api into a proxy address, but also displaying it as a route on the server.

In addition, pay attention to the separator when setting routing rules/ Some students like to write target: 'http://localhost:3000/', if you write a delimiter after the port, you will find that the route is not up to par. At this time, you need to add the '/' route rule and also add the '/' interface to match it, otherwise you will find that there is an extra separator when requesting the interface, such as: '/api//goods'.

After setting up, introduce it in , set proxyTable to complete the setting

const proxyConfig = require('./proxyConfig')
 = {
  dev: {
    env: require('./'),
    host: 'localhost',
    port: 8188,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: ,
    cssSourceMap: false,
  }
 }

Write this when requesting

Copy the codeThe code is as follows:

('/api/goods').then((res)=>{();}}).catch((err)=>{(err);}})

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.