How to use vue-cli development environment to implement cross-domain requests

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

During front-end development, requests to the backend interface often need to be cross-domain. 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:

How to use JS to find the maximum element of a Number type array

How to deal with vue-router lazy loading Loading too many resources for the first time causes slowness

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