在Vue项目中配置代理来解决跨域问题

祈澈菇凉2023-10-19 15:37

在Vue项目中配置代理来解决跨域问题非常简单。可以使用Vue的开发服务器来代理API请求。

1：在Vue项目根目录下找到vue.config.js文件（如果没有该文件，可以创建一个），打开它。

2：在vue.config.js文件中，添加以下代码：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://api.example.com',  // 设置代理的目标URL
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''  // 将请求中的/api路径替换为空
        }
      }
    }
  }
}

在上述代码中，配置了一个代理，将以/api开头的请求代理到http://api.example.com。

target：设置代理的目标URL，即实际上处理API请求的服务器地址。
changeOrigin：设置为true以实现跨域请求。
pathRewrite：用于将请求中的路径替换为空。这里的配置将把/api路径替换为空，例如将/api/users替换为/users。

根据实际需求修改这些配置。如果有多个代理配置，可以在proxy对象中添加更多的配置。

3：保存vue.config.js文件。

4：重新启动Vue开发服务器（如果已经运行了，还需要重新启动）。

这样，以/api开头的请求将被代理到目标URL，避免了跨域问题。在Vue组件中，可以使用相对路径/api来发起API请求，而不需要担心跨域限制。

例如，在Vue组件中，可以这样使用代理：

axios.get('/api/users')
  .then(response => {
    // 处理API响应
  })
  .catch(error => {
    // 处理错误
  });

在上述代码中，axios.get('/api/users')中的/api路径将被代理到目标URL，实际上发起了跨域请求到http://api.example.com/users。