nginx反向代理跨域配置
从开始学习编程,到实际工作之后,发现很多公司似乎都在用Nginx来做服务器的反向代理,nginx不仅能够解决跨域问题,还有负载均衡的效果,我的上一家公司也是用的nginx,后来从后端转到全栈之后,我便开始接触nginx,下面是具体配置,记录在此,以防忘记。
前言
nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,并在一个BSD-like 协议下发行。由俄罗斯的程序设计师Igor Sysoev所开发,供俄国大型的入口网站及搜索引擎Rambler(俄文:Рамблер)使用。其特点是占有内存少,并发能力强,事实上nginx的并发能力确实在同类型的网页服务器中表现较好,中国大陆使用nginx网站用户有:百度、京东、新浪、网易、腾讯、淘宝。
在做WEB个人项目的时候,有的人喜欢写Jsp,CS等,便于快捷开发,但是后期不便于维护,并且jsp,cs等编写的ide代码提示友好度差,因此前后端分离是大势所趋。但是随之而来的就是跨域问题。
比如说下图,我们在一个html文件中这样发送异步请求,浏览器会报“Access-Control-Allow-Origin' header is present on the requested resource”这个错误,意思是存在跨域请求,当一个地址请求另一个与自己地址不同端口不同的地址的时候,会出现跨域,因为他会检查请求头是否匹配。
解决办法:1.修改HTML头文件,改成可以跨域访问(不推荐)
2.用nginx来对地址进行反向代理,以下面为例
nginx 配置
1.去官网下载nginx,是个压缩包,解压出来,和Tomcat一样的用法。
2.解压后有个conf的文件夹,修改里面的nginx.conf这个文件
3.先说跨域配置
在上面的图中我们可以看到 listen 为nginx监听的端口,server_name 为本的的ip,当然如果有其他的地址的话也可以设置,比如“”baidu.com”,location / 下面有root为前端资源文件,index 指的是起始页,这里的root建议放在根目录,因为有可能会错,在这里又有个 location /mp 这个流程我下一章会详细讲解每一个的意思,以及匹配规则,在这里我配置了一个/mp来作为我API的代理. rewite 后面是请求地址正则匹配规则,以^开头,$结束,/$1 代表是(.*)中的内容,proxy_pass 是我的目标地址。
4.修改HTML中的请求路径,运用代理,如下图是修改后的
这里我请求的“
/mp/Expense/UserController/login.do
地址经过nginx代理之后就是这个地址
http://localhost:8080/Expense/UserController/login.do这样就可以跨域访问了,实现了前后端分离。
5.nginx启动的时候有几个快捷命令需要提一下,如果电脑是win10系统,建议用cmd进去,不然会有错误。
进入到解压的文件夹,start nginx就启动了nginx,记住每一次修改了conf就要reload一下
start nginx 启动nginx
nginx -s stop 退出
nginx -s quit 有程序的退出
nginx -s reload 重启
windows下修改了nginx的配置建议每次看下进程是否杀死了,还有浏览器清下缓存,避免修改配置文件无效.
以上就是nginx解决跨域问题,在之后的一篇文章中我会详细介绍在高并发的情况下,nginx如何配置来实现负载均衡,以及 location的匹配规则以及企业常用的配置技巧。