vue实现反向代理

Vue 项目中实现反向代理

在 Vue 项目中，通常通过配置 vue.config.js 文件来实现反向代理，避免跨域问题。以下是具体实现方法：

配置 vue.config.js 文件

打开或创建项目根目录下的 vue.config.js 文件，添加 devServer 配置项：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://your-backend-server.com', // 目标服务器地址
        changeOrigin: true, // 是否改变请求源
        pathRewrite: {
          '^/api': '' // 路径重写，去除请求路径中的 '/api'
        }
      }
    }
  }
}

使用代理发送请求

在 Vue 组件中，可以使用 axios 或其他 HTTP 库发送请求：

import axios from 'axios';

axios.get('/api/users')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

生产环境配置

对于生产环境，需要配置服务器的反向代理（如 Nginx）：

server {
  listen 80;
  server_name your-domain.com;

  location /api {
    proxy_pass http://your-backend-server.com;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  }
}

注意事项

• 开发环境使用 vue.config.js 配置代理仅适用于 npm run serve 启动的开发服务器。
• 生产环境需要确保服务器（如 Nginx）正确配置反向代理。
• 路径重写 (pathRewrite) 可根据实际需求调整，确保请求路径正确映射到后端接口。