Vue 3中的反向代理 和如何在服务器配置反向代理

在Vue 3中使用反向代理通常是为了在开发环境中将API请求代理到后端服务器。这通常在Vue项目的vue.config.js文件中配置。以下是如何配置的示例代码：

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://backend-server.com', // 后端服务器地址
        changeOrigin: true, // 是否改变源地址
        pathRewrite: {
          '^/api': '' // 重写路径
        }
      }
    }
  }
}

在这个配置中，当开发服务器接收到以/api开头的请求时，它会将请求代理到http://backend-server.com。changeOrigin设置为true意味着请求头中的Host会被设置为目标URL的主机名。pathRewrite用于重写请求路径，去除前缀/api。

在服务器配置反向代理，如Nginx，则需要在服务器配置文件中添加类似的代理规则。以下是Nginx配置反向代理的示例：

http {
    server {
        listen 80;
        server_name your-domain.com;
 
        location /api/ {
            proxy_pass http://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;
            proxy_set_header X-Forwarded-Proto $scheme;
        }
    }
}

在这个配置中，当Nginx服务器接收到以/api/开头的请求时，它会将请求代理到http://backend-server.com，同样也会改变源地址的请求头。