vue跨域 proxy

Vue.js中可以使用代理（proxy）来解决跨域问题。通过配置webpack的devServer.proxy选项或者通过vue.config.js中的devServer.proxy选项来实现。

1. 在webpack配置文件中配置proxy

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

这里配置了一个代理，将请求地址中以/api开头的请求转发到http://localhost:3000上，同时将请求地址中的/api替换为空。

2. 在vue.config.js中配置proxy

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

这里的配置与在webpack配置文件中配置proxy的方式类似，只是写在了vue.config.js中。

通过以上两种方式配置proxy，就可以解决vue跨域问题。在实际开发中，建议使用第二种方式配置proxy，因为这样可以将webpack的配置和vue的配置分离，更加清晰明了。