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

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

第一:安装、配置

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或者端口产生的跨域问题。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值