How to configure interface proxy using vue-cli

This article mainly introduces the vue-cli interface proxy configuration. The editor thinks it is quite good. Now I will share it with you and give it as a reference. Let’s follow the editor and take a look.

This article introduces the vue-cli interface proxy configuration and shares it with everyone. The details are as follows:

Some students have questions about how to configure the interface proxy when configuring it. Why is the interface still blocked after success? In fact, the proxy has been successful but the interface access address rules are not clear.

The following uses local testing as a chestnut to introduce to you

Some basic operations will not be introduced here

Find index.js in the vue-cli config folder. This is the file that configures the interface rules. Create proxyConfig.js in the same directory. Some students are used to modifying the original file directly. This is also possible, but it is recommended to use a new file:

module.exports = {
  proxyList: {
    '/api': {
      target: 'http://localhost:3000',  （这里是代理接口的位置）
      changeOrigin: true,（允许跨域，如果这不写，调用接口接口时会有跨域错误说缺少请求头）
      pathRewrite: {'^/api': '' } （路由规则下面详细介绍）
    }
  }
}

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

After the above code is executed, it means that as long as '/api' is seen in the interface, it will automatically become our settings address, then we can standardize the interface writing standard when setting up. This attribute pathRewrite is used. Path rewrite {'^/api': '' } refers to what you want the route to look like. If it is empty, then parsing If our interface is written as $http.get('/api/good'), then we will see access to /good on the server side. If there is no corresponding route matching on the server side at this time, the client server will An error will be displayed. 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' }, then we will see /api/goods on the server. Interface access means that /api is not only automatically resolved into a proxy address, but also displayed as a route on the server side.

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

After setting up, introduce proxyConfig.js in index.js, set proxyTable and complete the setting

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

Write like this when requesting

axios.get('/api/goods').then((res)=>{console.log(res.data);}}).catch((err)=>{console.log(err);}})

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

About implementing the dispatch mechanism between Vue2.0 parent and child components (detailed tutorial)

How to do it in react-router Using history to control routing (detailed tutorial)

How to use jqprint to print page content

Use js to implement WeChat to evoke Alipay to receive red envelopes (detailed tutorial )

How to use Gulp to implement static web page modularization?

How to integrate vux in vue.js to implement pull-up loading and pull-down refresh

The above is the detailed content of How to configure interface proxy using vue-cli. For more information, please follow other related articles on the PHP Chinese website!