Vue set proxy to solve cross-domain

        Cross-domain problems are often encountered in projects where front-end and back-end are separated. Set up a proxy to solve cross-domain problems.

method one

        Configure in the vue.config.js (same level as package.json) file in the vue project

module.exports = defineConfig({
  devServer: {
    proxy: 'http://47.100.232.228:3000'
  }
})

        Only one backend address can be configured.

Method Two

        If a project wants to request multiple addresses, configure it in the vue.config.js file

module.exports = defineConfig({
  devServer: {
    proxy: {
      '/api': {
        target: 'http://47.100.232.228:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      },
      '/api1': {
        target: 'http://47.100.232.228:5000',
        changeOrigin: true,
        pathRewrite: {
          '^/api1': ''
        }
      }
    }
  }
})

        target is the target address, and pathRewrite is the rewrite address.

        When requesting the backend interface, the path of the backend interface also needs to be changed.

        For example, the original request interface path is: http://47.100.232.228:3000/login

        After setting the proxy, you need to add a prefix, which is: http://localhost:8080/api/login

Use localhost as much as possible for this machine, and sometimes you cannot access it with 127.0.0.1.