Nginx处理Web项目前后端分离最佳实践

最新推荐文章于 2025-03-16 15:33:59 发布

转载最新推荐文章于 2025-03-16 15:33:59 发布 · 378 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5b611aefe51d4519596bbe92

文章标签：

#运维 #前端 #java #ViewUI

本文探讨了前后端分离的概念及其重要性，并通过实例演示了如何利用Nginx进行反向代理，解决前端Ajax请求的跨域问题。

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

博客原创：看不到我看不到我，转载请说明出处

一、前言

最近有点关于前后端分离处理的心得，分享出来。从以下三个方面来分析前后端分离：

什么是前后端分离
为什么要前后端分离
怎样实现前后端分离

以上三点基本解决了我们实际开发中前后端分离的所有问题。

二、分析

1

什么是前后端分离，为什么要实现前后端分离？

资深老 web 和我闲聊，别看现在前端开发工程师如日中天，就是几年前还没前端开发这岗位，所有的事情都需要后台来搞，前端静态页面、中间 Java 代码、后台数据库处理，后台工作量任务繁重。慢慢大家对网站的审美、体验要求提高，才出现前端开发，前端静态页面代码都交予前端开发，后台也能专心自己的 Java 工作，专注于代码的优化、并发的处理。

当然上面扯远了。从工作分配上看，前后端分离是指前后端代码各自有专业的人负责。但是在实际开发中就涉及到两个问题。

代码管理
Ajax 跨域

我们知道Ajax是不能跨域请求的。简单来说Ajax请求的url只能是个相对路径，而不能像http一样的绝对路径。 这就要求我们将前端静态页面复制拷贝到web项目下，Ajax才能发送请求。

但是项目是由一个团队负责的，前端人员提交的代码不可能提交到我们 web 项目下，如果前端代码更新了，我们不可能每次都去复制拷贝一次，所以这就要求我们能够前后端分离。

希望通过一系列处理，最终能达到的效果：前端团队代码提交到自己对应的位置不用管，而后台通过处理，在项目运行时Ajax请求能发挥作用。

2

怎样实现前后端分离？如果我们去网上搜，估计能搜出一大堆解决办法。最常见的应该是JSONP，老 web 和我说当年他也是这样处理的。

但是现在使用代理方式解决较多，如下：

前端Ajax请求地址是本机地址
本地地址监控到请求后向实际接口请求数据，然后再将数据返回前端

现在比较多的 Node.js就是这，但是我们可以用更加方便的反向代理解决跨域问题。

三、实践

关于Nginx的使用，我的理解是，简单的使用比较简单，功能复杂的配置却比较难。这里我拿本地的环境来测试下吧，生成环境是一样的，毕竟Nginx最重要的就是conf的配置，而它在 Window 和 Linux 是一样的。

**1.下载 window nginx **

下载地址

2.准备好相关资源。静态页面、解压Nginx、web项目

3.配置conf

		location / {
                root   E:/workspace/web/ksd-guangfu/; #html访问路径
                index  login.html; #html文件名称
            }	
复制代码

对比如上我的静态页面地址路径

再配置代理，特别要注意反向代理只会代理 ip+port这一串，接口后面的并不影响，如下举例：

http://127.0.0.1:80/test
复制代码

通过配置转发后，只会反向代理其他服务器和端口，如下

http://10.2.9.49:8080/test
复制代码

当然，除非在里面使用正则表达式重写请求字符串地址

现在拿真实例子测试下。

这里我监听本地的 80 端口，在加上前面配置的静态页面地址，当在浏览器输入

http://localhost:80
复制代码

会跳转到前面配置的 login.html

再看Ajax请求地址

       location /kstar_api/ { 
                proxy_pass http://localhost:8080;        #代理地址 --服务器接口域名 这里写你的后端服务ip+端口
        }
复制代码

location 后面使用了kstar_api匹配，因为我实在本地测试，web项目运行在本地 8080 端口，所以这里直接代理到