vue开发环境、生产环境配置与nginx配置后端代理转发跨域

一、配置步骤

在Vue项目中，通常会在项目的环境配置文件中设置不同环境下的API接口地址。对于生产环境，你可以使用Nginx作为反向代理来处理后端地址的转发。

1.在Vue项目中的env文件夹下，找到env.production文件，并设置生产环境下的API接口地址：

module.exports = {NODE_ENV: '"production"',API_HOST: '"/api/"' // 注意这里不是实际的URL，而是Nginx会处理的路径
}

2.配置Nginx服务器。在Nginx配置文件中（通常是nginx.conf或者单独的站点配置文件），添加一个location块来处理对/api/路径的请求，并将其转发到实际的后端服务器：

server {listen 80;server_name your-domain.com;location / root /path/to/your/vue/app;try_files $uri $uri/ /index.html;}location /api/ {proxy_pass http://backend-server-url; # 实际后端API服务器地址proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection 'upgrade';proxy_set_header Host $host;proxy_cache_bypass $http_upgrade;}
}

在这个配置中，当Nginx服务器接收到对http://your-domain.com/api/的请求时，它会将请求转发到http://backend-server-url。这样，你的Vue前端应用可以使用相对路径向Nginx请求API，而Nginx则负责将请求转发到实际的后端服务。

后端提供的请求接口完整地址示例：https://www.bai