前后端分离（二）之vue前端的nginx配置代理转发

最新推荐文章于 2025-10-31 00:16:13 发布

原创最新推荐文章于 2025-10-31 00:16:13 发布 · 6.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#nginx代理 #跨域

linux 同时被 2 个专栏收录

11 篇文章

订阅专栏

vue

2 篇文章

订阅专栏

本文详细介绍了如何在Linux环境下使用Nginx进行安装配置，通过设置myself.conf文件实现对不同服务的代理转发，有效解决前端项目中的跨域问题。具体包括配置upstream、server及location指令，实现同一IP和端口访问多个服务。

第一：安装、配置

linux中首先安装nginx，然后进入目录 /etc/nginx/conf.d，在这里新增一个自己项目的myself.conf文件

使用vi编辑，内容：

upstream my_server {                                                         
    server 192.168.20.101:10001;  #代理转发的地址1
}

upstream history_server {
    server 192.168.20.202:10002;  #代理转发的地址2
}

server {
        listen 8080; #前端浏览器访问的端口
        server_name  192.168.10.100; #前端浏览器访问的ip

        location / {
           root   /var/www/html;  #前端vue编译的dist文件夹下的内容放置的目录
           index  index.html index.htm;
        }

        #代理转发的地址
        location /imageResize {
           proxy_pass http://my_server;
        }

        #代理转发的地址
        location /image {
           proxy_pass http://history_server;
        }
}

然后使用service nginx start启动或者nginx -s reload重启服务。

第二：前端访问

1.在浏览器中输入 http://192.168.10.100:8080/ 直接访问前端vue的登录页面；

2.在浏览器中输入 http://192.168.10.100:8080/imageResize 则相当于代理访问 http://192.168.20.101:10001/imageResize前缀的url；

3.在浏览器中输入 http://192.168.10.100:8080/image 则相当于代理访问 http://192.168.20.202:10002/image前缀的url；

PS:使用nginx完成同一个ip和端口访问，可以访问不同的服务，避免项目内部因为访问不同ip或者端口产生的跨域问题。