SoFunction
Updated on 2025-04-05

Methods for implementing cross-domain requests in vue-cli development environment

During front-end development, requesting backend interfaces often requires cross-domain. Vue-cli only needs to open config/ to modify the following content to implement cross-domain requests.

//For example, the interface url to be requested is http://172.3.2.1:8000/look/1
 = {
  dev:{
    proxyTable:{
      '/api':{
        target: 'http://172.3.2.1:8000',
        changeOrigin: true,
        pathRewrite: {
         '^/api': ''
        }
      }
    }
  }
}

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

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

Generally speaking, the above method has no problem. If the above method does not work, you can try writing it like this:

//For example, the interface url to be requested is http://172.3.2.1:8000/look/1
 = {
  dev:{
    proxyTable:{
      '/look':{
        target: 'http://172.3.2.1:8000',
        changeOrigin: true,
        pathRewrite: {
         '^/look': '/look'
        }
      }
    }
  }
}

At this time, at the URL where you want to request the interface, enter /look/1 to implement cross-domain request.

Details:/webpack/

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.