How vue-cli makes cross-domain requests

This time I will show you how vue-cli makes cross-domain requests. What are the precautions for vue-cli to make cross-domain requests. The following is a practical case, let's take a look.

During front-end development, requests to the backendInterface often require cross-domain requests. To implement cross-domain requests with vue-cli, you only need to open config/index.js and modify the following content.

//例如要请求的接口url为http://172.3.2.1:8000/look/1
module.exports = {
  dev:{
    proxyTable:{
      '/api':{
        target: 'http://172.3.2.1:8000',
        changeOrigin: true,
        pathRewrite: {
         '^/api': ''
        }
      }
    }
  }
}

At this time, enter /api/look/1 at the URL of the interface you want to request to achieve cross-domain requests.

If you open F12 at this time, you will find that the requested url is localhost:8080/api/look/1. This is actually a virtual request for data from the local, so that there will be no cross-domain problems.

Under normal circumstances, there is no problem with the above method. If the above method does not work, you can try writing like this:

//例如要请求的接口url为http://172.3.2.1:8000/look/1
module.exports = {
  dev:{
    proxyTable:{
      '/look':{
        target: 'http://172.3.2.1:8000',
        changeOrigin: true,
        pathRewrite: {
         '^/look': '/look'
        }
      }
    }
  }
}

At this time, enter / at the url of the interface you want to request. Look/1 can implement cross-domain requests.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

JS dynamically manipulates HTML tags

##Use JS to manipulate input text box content

The above is the detailed content of How vue-cli makes cross-domain requests. For more information, please follow other related articles on the PHP Chinese website!