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

DN金猿

已于 2024-10-13 13:51:57 修改

阅读量1.4k

点赞数 11

文章标签： vue.js nginx 前端

于 2024-10-13 13:49:38 首次发布

本文链接：https://blog.csdn.net/weixin_44259233/article/details/142897338

版权

一、配置步骤

在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