nginx前后端不分离项目代理配置

文章目录

现在很多时候都是前后端分离的项目,所以配置代理的时候,前端和后端的代理分开配置,各访问各的,互不干扰。
但是在前后端不分离的项目中,nginx代理有些不同,特此在这记录一下。

了解

前后端不分离的项目,访问页面是通过请求转发请求重定向的方式。每一次的转发和重定向,后端项目本身都会携带着自己的content-path,这样使得在nginx代理的时候,转发和重定向的请求不能再次被nginx拦截,从而导致请求不到页面或者接口。

举例1:一个项目content-path路径配置为空,使用nginx代理。

nginx.conf:配置如下

nginx 复制代码
# my_project是nginx会识别拦截的请求
location /my_project/ {
    # http://127.0.0.1:8080/ 是访问没有配置content-path的,项目默认访问路径
    proxy_pass http://127.0.0.1:8080/;

    proxy_set_header Host   $host;
    proxy_set_header X-Real-IP      $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

第一步:进行如下远程请求,访问nginx:

http://your-ip-address:port/my_project/

第二步:访问这个路径会通过nginx代理一步,然后访问到项目默认访问路径,假设这个路径会重定向一个页面

return "redirect:/demo/hello.html"

第三步:这个重定向请求的url反应到代理上面就变成了

http://your-ip-address:port/demo/hello.html

看这个链接就会发现, my_project 被nginx识别拦截的标识经过重定向之后没有了,所以也就找不到页面了。

不同于前后端分离项目,前端的请求会一直携带着能被nginx识别的标识进行访问。

举例2:配置上项目的content-path,再使用ngxin代理

content-path配置如下

nginx 复制代码
server:
  port: 8080
  servlet:
    context-path: /my-project

添加content-path后nginx.conf配置修改如下

nginx 复制代码
# my_project是nginx会识别拦截的请求
location /my_project/ {
    # http://127.0.0.1:8080/my_project 是访问配置了content-path的,项目默认访问路径,代理效果同例1
    proxy_pass http://127.0.0.1:8080/my_project;

    proxy_set_header Host   $host;
    proxy_set_header X-Real-IP      $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

重复上述的步骤,不同点发生在第二步,经过后端重定向的请求地址变了

第一步:进行如下远程请求,访问nginx:

http://your-ip-address:port/my_project/

第二步:访问这个路径会通过nginx代理一步,然后访问到项目默认访问路径,假设这个路径会重定向一个页面

#还是重定向到相同的页面

return "redirect:/demo/hello.html"

第三步:这个重定向请求的url反应到代理上面就变成了

http://your-ip-address:port/my_project/demo/hello.html

为什么最后重定向的地址会多一个my_project

因为前后端不分离的项目在进行请求重定向的时候会携带自身的content-path的值,拼接到请求域名的后面,所以当域名携带着my-project这个能被nginx识别的url标识符的时候,就会再次被nginx拦截,从而访问到项目资源。

总结

  1. 前后端不分离的项目在进行请求重定向和请求转发的时候,会携带自身的content-path值,拼接到域名后面。
  2. 前后端不分离的项目nginx拦截url关键字要和content-path值保持一致。

如果不保持一致会发生什么?重定向之后通过代理还是访问不到资源。

假设content-path配置为:

yaml 复制代码
server:
  port: 8080
  servlet:
    context-path: /project

nginx配置为:

nginx 复制代码
# my_project是nginx会识别拦截的请求
location /my_project/ {
    # http://127.0.0.1:8080/my_project 是访问配置了content-path的,项目默认访问路径,代理效果同例1
    proxy_pass http://127.0.0.1:8080/project;

    proxy_set_header Host   $host;
    proxy_set_header X-Real-IP      $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}	

同样是重复上面例子里面的步骤

第一步:进行如下远程请求,访问nginx:

http://your-ip-address:port/my_project/ # 正常访问到nginx

第二步:访问这个路径会通过nginx代理一步,然后访问到项目默认访问路径,假设这个路径会重定向一个页面

#还是重定向到相同的页面

return "redirect:/demo/hello.html"

第三步:这个重定向请求的url反应到代理上面就变成了

#发现缺少了能让nginx拦截的url关键字,访问不到资源了

http://your-ip-address:port/project/demo/hello.html

相关推荐
MANONGMN38 分钟前
【走进Docker的世界】Docker的发展历程
运维·docker·容器
阿雄不会写代码1 小时前
Amazon Linux 训练lora模型的方式
linux·运维·服务器
Bruce_Liuxiaowei2 小时前
绕过文件上传漏洞并利用文件包含漏洞获取系统信息的技术分析
运维·网络安全·php·apache
monster_风铃4 小时前
华为实验:DHCP 典型配置
运维·服务器·网络
珹洺5 小时前
Linux操作系统从入门到实战(十八)在Linux里面怎么查看进程
linux·运维·服务器
源猿人6 小时前
nginx代理如何配置和如何踩到坑篇
前端·nginx
企鹅侠客8 小时前
Docker 跨主机容器之间的通信macvlan
运维·docker·容器·macvlan·docker容器跨主机通信
小妖6668 小时前
Alibaba Cloud Linux 3 安装 git
linux·运维·git
苹果醋311 小时前
从零搭建React框架--第一章:create-react-app、antd、less
运维·vue.js·spring boot·nginx·课程设计
G_H_S_3_12 小时前
【网络运维】Linux:MariaDB 数据库介绍及管理
linux·运维·网络·数据库