当前位置:首页 > 技术文章 > 正文内容

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

arlanguage5个月前 (12-12)技术文章43

说明

现在的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进程。

扫描二维码推送至手机访问。

版权声明:本文由AR编程网发布,如需转载请注明出处。

本文链接:http://www.arlanguage.com/post/110.html

分享给朋友:

“Windows中使用Nginx解决前后端分离部署中的跨域问题” 的相关文章

Nginx重写规则(2) nginx中地址重写有哪些选项

需求:研发提出了一些路由跳跃的要求。解决问题:在特殊情况下,如果业务和研发无法快速处理,则需要运维快速跳转来解决临时问题并避免出现较大的漏洞。Nginx重写规则案例一:临时将请求路径/colorv1/getcolorv1 的请求转发到 v2,且带着问号后面的参数 :location ~ ^/(.)/...

linux(centos)yum安装nginx最新版及配置文件

安装nginx及配置文件我们采用yum的方式安装最新版nginx,就两步即可。最新版本及其他Linux版本可见官方文档官方文档:http://nginx.org/en/linux_packages.html#stable请读者根据自己的版本选择配置:按官方文档,选择自己版本centos可看到步骤:1...

Nginx实战-监控nginx.conf配置文件,配置文件修改自动重启nginx

1.1 实现目标在学习或者进行nginx测试的时候,耗费在 nginx -s reload/stop 上的命令时间很多,修改任意内容都需要重新启动或者停止启动,基本上状态就是在下面5个状态间来回切换vim nginx.conf修改nginx.conf保存nginx.conf重启nginx刷新浏览器....

linux系统安全,多人共用服务器,防止别人干‘坏事’

我们知道,在开发一个应用的过程中,需要涉及代码、操作系统、网络和数据库等多个方面。所以,只是了解代码安全肯定是不够的,我们还需要了解常见的基础环境和工具中的安全机制,学会通过正确地配置这些安全机制,来提升安全保障。谈到 Linux,我相信你每天都在使用 Linux 进行各种开发和运维操作。但是,大多...

nginx入门——nginx访问日志(六)

日志功能在ngx_http_log_module模块中定义,实现了以指定格式写入请求日志。我们先来看一个nginx配置文件:http { include mime.types; default_type application/octet-stream;...

Nginx 重定向 HTTP 到 HTTPS 的便捷方法

问题描述 自从大规模使用 HTTPS 之后,所有的 HTTP 访问都要重定向到 HTTPS 站点。不然,客户只会输入域名,而很多浏览器又默认使用 HTTP 协议,如果我们没有提供 HTTP 访问,又不重定向,那客户将看到一个空白页(无法访问),客户会以为我们的站点有问题,毕竟客户哪里知道什么是 HT...