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

这篇具有很好参考价值的文章主要介绍了nginx前后端不分离项目代理配置。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


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

了解

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

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

nginx.conf:配置如下

# 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配置如下

server:
  port: 8080
  servlet:
    context-path: /my-project

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

# 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配置为:

server:
  port: 8080
  servlet:
    context-path: /project

        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文章来源地址https://www.toymoban.com/news/detail-796911.html

到了这里,关于nginx前后端不分离项目代理配置的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Springboot前后端不分离

    当前项目前后端都在一起时,避免一个一个controller的写使用配置文件进行映射

    2024年02月12日
    浏览(36)
  • 若依框架环境的搭建(前后端不分离版)

            最近在做数据库课程设计,因为不想再用Java里面的GUI界面,想用Web页面来替代,但手写各个页面和增删改查这些重复性较高的模块属实作业量不小,所以,正好借此机会来学习一下早有耳闻的,号称后台管理系统神器—— 若依框架 ,下面先来总结一下环境部署与

    2024年02月04日
    浏览(53)
  • Ruoyi安装部署(linux环境、前后端不分离版本)

    目录 简介 1 新建目录 2 安装jdk 2.1 jdk下载 2.2 解压并移动文件夹到/data/service目录 2.3 配置环境变量 3 安装maven 3.1 进入官网下载最新的maven 3.2 解压并移动文件夹到/data//service目录 3.3 配置环境变量 3.4 配置本地仓库地址与阿里云镜像 4 安装git 4.1 进入官网下载git 4.2 解压编译安

    2024年02月11日
    浏览(42)
  • SpringBoot复习:(28)【前后端不分离】自定义View

    一、自定义View 二、控制器返回视图名称指向上述View BeanNameViewResolver就会把我自定义的myView这个视图解析到MyVIew这个view类。

    2024年02月13日
    浏览(40)
  • 前后端分离用nginx做代理服务器,刷新页面报404 解决方法

    情况一 在nginx配置文件中加上一句话,作用就是nginx代理时候找不到页面会尝试访问这个指定页面,而前端vue项目的话,页面正好是有vue自己进行管理,所以就不会报错了 location /{                 alias /var/www/html/;                 index index.html abc.html;                 tr

    2024年02月09日
    浏览(48)
  • 系列四、Spring Security中的认证 & 授权(前后端不分离)

    1.3.1、概述         前后端不分离的登录成功回调有两个关键方法,即:defaultSuccessUrl 和 successForwardUrl。那么它们之间的区别是什么呢?        (1)successForwardUrl 表示不管你是从哪里来的,登录后一律跳转到 successForwardUrl 指定的地址。例如 successForwardUrl 指定的地址为/l

    2024年01月19日
    浏览(48)
  • 前后端分离项目(gin+gorm+vue3)腾讯云部署详细教程(Xshell安装及使用,go,mysql,nginx安装及配置)

    1. 购买服务器 进入腾讯云官网点击最新活动,进入云+校园专区,我购买的是第一个 购买完成后,进入控制台,云产品选择轻量应用服务器,即可查看到自己的服务器,记住自己的公网IP 2. 重置密码 点击进入服务器详情,初次使用需重置密码 点击重置密码按提示操作即可,

    2024年02月06日
    浏览(62)
  • Nginx前后端分离部署配置

    今天在虚拟机上尝试前后端分离式部署调用,记录下配置过程 1. 前端打包 npm run build,会在项目根目录下生成一个 dist 的文件夹,这里我把dist下的文件及目录放在虚拟机 /usr/local/src/html 位置 2. 后端打包简略说一下吧,使用maven打出来的jar包放在虚拟机目录: /usr/local/src/java

    2024年02月10日
    浏览(41)
  • 【Docker】安装Nginx容器并部署前后端分离项目

    🎉🎉欢迎来到我的CSDN主页!🎉🎉 🏅我是Java方文山,一个在CSDN分享笔记的博主。📚📚 🌟推荐给大家我的专栏《Docker实战》。🎯🎯 👉点击这里,就可以查看我的主页啦!👇👇 Java方文山的个人主页 🎁如果感觉还不错的话请给我点赞吧!🎁🎁 💖期待你的加入,一起

    2024年01月23日
    浏览(48)
  • Nginx同一端口部署多个前后端分离的vue项目

    要用nginx容器部署多个前端项目可以采用监听端口,和基于location配置两种方法, 我的nginx是使用docker部署的,启动的时候没有开多余的端口,所以采用location配置 一个server下根据根路径不同分别代理访问不同项目。 下面操练起来,问:把大象放冰箱?总共需要几步:三步!

    2024年02月02日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包