vue-cli makes cross-domain requests

This time I will bring you vue-cli to make 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. z

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:

Vue Nuxt.js makes server-side rendering

What specifications for writing JS code has Google released?

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