使用Nginx服务器解决前后端分离开发时的跨域问题

  • A+
所属分类:操作系统

在开发过程中,由于前后端分离,前端只负责View和Controller层、后端负责Model层和业务处理/数据等,所以会经常遇到跨域问题,这时候我们需要通过一些反向代理服务器来解决前后端联调功能。

一、Nginx介绍

Nginx (engine x) 是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服务器。Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru站点(俄文:Рамблер)开发的,第一个公开版本0.1.0发布于2004年10月4日。其将源代码以类BSD许可证的形式发布,因它的稳定性、丰富的功能集、示例配置文件和低系统资源的消耗而闻名。2011年6月1日,nginx 1.0.4发布。Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,并在一个BSD-like 协议下发行。其特点是占有内存少,并发能力强,事实上nginx的并发能力确实在同类型的网页服务器中表现较好,中国大陆使用nginx网站用户有:百度、京东、新浪、网易、腾讯、淘宝等。

二、Windows下安装、启动、停止、重启Nginx服务器

1、下载最新的稳定版本,官网下载地址(http://nginx.org/en/download.html)


目前最新的主线版本是1.13.5,建议选择稳定版本1.12.1,点击 nginx/Windows-1.12.1 直接下载。下载是是一个.zip压缩文件,因为Nginx是在UnixLinux OS上编译运行,而Windows上面是移植过来的,所以解压后放到指定的文件目录下即可。
2、启动Nginx

正常启动方式有三种:
A、在当前目录打开CMD命令行(按住Shift+鼠标右键,在此处打开PowerShell窗口),运行 start nginx

B、在当前目录打开CMD命令行(按住Shift+鼠标右键,在此处打开PowerShell窗口),运行 nginx.exe
注:这种方法会使你的CMD窗口一直处于执行中,不能进行其他命令操作
C、双击nginx.exe,这时候会有一个小黑框一闪而过,表示Nginx启动成功
注:这样会导致修改配置后重启、停止nginx无效,需要手动关闭任务管理器内的所有nginx进程
--建议使用第一种方法
--启动的时候,可能会遇到Windows防火墙的提示,点击允许访问即可
3、停止Nginx
正常启动方式有两种:

A、在当前目录打开CMD命令行(按住Shift+鼠标右键,在此处打开PowerShell窗口),运行 .\nginx.exe -s stop
B、在当前目录打开CMD命令行(按住Shift+鼠标右键,在此处打开PowerShell窗口),运行 .\nginx.exe -s quit
注:stop是快速停止nginx,可能并不保存相关信息;quit是完整有序的停止nginx,并保存相关信息。
4、重启Nginx
如果配置信息修改,需要重新加载这些配置时可使用此命令(这样无需先停止服务再启动服务,一气呵成)

在当前目录打开CMD命令行(按住Shift+鼠标右键,在此处打开PowerShell窗口),运行 .\nginx.exe -s reload
5、查看Nginx版本
在当前目录打开CMD命令行(按住Shift+鼠标右键,在此处打开PowerShell窗口),运行 .\nginx.exe -v
6、验证Nginx服务器是否正常开启
在浏览器中输入localhost:80,如果显示如下,表示Nginx服务器启动成功,恭喜!!

三、Windows下配置Nginx服务器

Nginx的配置文件在conf/nginx.conf中,可以选择用Notepad++等文本编辑器打开,主要的配置信息大约在35行左右(# 表示注释)

如果你的默认80端口被占用,可以修改成其他端口,修改完成后需要重启Nginx服务器;
如果你的代码在 E:/WebstormProjects/web下面,可以将root后面的路径修改成如下,然后重启Nginx服务器

location / {
  root E:/WebstormProjects/web;
  index index.html index.htm;
}

在实际开发的过程中,会遇到后端的多个服务部署在不同的服务器上,这时就需要Nginx的反向代理功能了。

location /:匹配所有请求。因为所有请求都是以"/"开始。
location /api:匹配带有api字符串的接口,比如http://localhost:8081/api/user/login
location /kefu_api:匹配带有kefu_api字符串的接口,比如http://localhost:8081/kefu_api/login/kefu
rewrite:重写域名后面除参数外的URL路径,正常项目中前端接口的路径和后台的是一致的,所以不需要重写
proxy_pass:转发的路径,就是实际请求后端的URL地址

正常在研发环境中只需要配置以上几点就行了,如果在生产环境下使用Nginx,还是需要其他的配置。

博主只是一名前端的小白,只是把自己用到的知识分享一下,要是有什么不对的地方,欢迎大家提出~~

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: