Windows中使用Nginx解决前后端分离部署中的跨域问题

off999 2025-01-04 22:24 22 浏览 0 评论

说明

现在的Java Web项目好多都使用前后端分离的开发部署方式，这样的好处有很多，比如：可以实现真正的前后端解耦，可以减少后端服务器的并发/负载压力，方便实现多端应用（网页端、移动端共用一个后台服务）、增加代码的维护性&易读性。一般我们会采用Nginx来部署前端代码，使用Tomcat来部署后台服务。最近在Windows系统中使用Nginx部署前端代码时调用后台服务时出现了跨域的报错，通过对Nginx的一些代理配置可以解决这个问题，下面给大家分享一下在Nginx中部署前端代码并解决跨域问题的方法步骤。

解决跨域问题的思路：出现跨域问题的原因在于静态资源的访问地址是Nginx服务器的地址，比如http://ip1:port1，然后我们在静态页面中通过ajax请求后台服务获取数据，后台服务的地址是http://ip2:port2，这两个地址的ip端口不同，就导致了跨域问题的出现，那我们就需要访问一个和前端页面具有相同地址的后台服务才会避免跨越问题，可以设置一个代理，比如我们把后台服务访问地址换成http://ip1:port1/api/，然后通过一定的配置将http://ip1:port1/api/地址收到的请求转发到真正的后台服务地址http://ip2:port2，这样就可以避免跨域问题的出现。

在html目录下面放静态资源

把我们要部署的静态资源文件夹放到Nginx的html目录下面，例如testpage文件夹下面有一个index.html页面，直接把testpage文件夹放到Nginx的目录下面。

配置反向代理

打开Nginx conf目录下面的nginx.conf文件，在第一个server里面添加一个location对前端发送的服务调用请求地址进行过滤，配置如下：

		location /api/ {
            rewrite ^/api/(.*)$ /$1 break;   #所有对后端的请求加一个api前缀方便区分，真正访问的时候移除这个前缀
            # API Server
            proxy_pass http://127.0.0.1:8092;  #将真正的请求代理到真实的服务器地址，ajax的url为/api/user/1的请求将会访问http://127.0.0.1:8092/user/1
        }

经过上面的配置以后，我们的前端资源访问地址和ajax请求的后台服务地址就可以保持一致，从而避免了跨域问题的出现。

启动Nginx

首先在cmd命令窗口中切换到nginx所在的目录，然后输入命令：

start nginx.exe

停止Nginx

在cmd命令窗口中输入：

nginx.exe -s stop

注意事项

1、有时候使用命令nginx.exe -s stop停不掉Nginx，可以使用命令taskkill /f /t /im nginx.exe强制关闭Nginx进程。

nginx for windows 配置

上一篇：web中间件应用系列:Nginx正向代理(共享)上网
下一篇：在.net core中使用nginx做负载均衡

Windows中使用Nginx解决前后端分离部署中的跨域问题

说明

在html目录下面放静态资源

配置反向代理

启动Nginx

停止Nginx

注意事项

相关推荐

取消回复欢迎你发表评论:

抖音上好看的小姐姐，Python给你都下载了

全网最简单易懂!495页Python漫画教程，高清PDF版免费下载

编写一个自动生成双色球号码的 Python 小脚本

python入门到脱坑输入与输出—str()函数

Python 3.14 的 UUIDv6/v7/v8 上新，别再用 uuid4 () 啦!

宝塔面板如何添加免费waf防火墙?（宝塔面板开启https）

Python三目运算基础与进阶_python三目运算符判断三个变量

(新版)Python 分布式爬虫与 JS 逆向进阶实战吾爱分享

失业程序员复习python笔记——条件与循环

【Nginx】史上最全的Nginx配置详解

Windows中使用Nginx解决前后端分离部署中的跨域问题

说明

在html目录下面放静态资源

配置反向代理

启动Nginx

停止Nginx

注意事项

相关推荐

取消回复欢迎 你 发表评论:

抖音上好看的小姐姐，Python给你都下载了

全网最简单易懂!495页Python漫画教程，高清PDF版免费下载

编写一个自动生成双色球号码的 Python 小脚本

python入门到脱坑 输入与输出—str()函数

Python 3.14 的 UUIDv6/v7/v8 上新，别再用 uuid4 () 啦!

宝塔面板如何添加免费waf防火墙?（宝塔面板开启https）

Python三目运算基础与进阶_python三目运算符判断三个变量

(新版)Python 分布式爬虫与 JS 逆向进阶实战吾爱分享

失业程序员复习python笔记——条件与循环

【Nginx】史上最全的Nginx配置详解

取消回复欢迎你发表评论:

python入门到脱坑输入与输出—str()函数