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

Admin
Admin
Admin
52
文章
6
评论
2017年9月12日10:47:11 评论 11,663 2121字阅读7分4秒

在开发过程中,由于前后端分离,前端只负责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,还是需要其他的配置。

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

继续阅读
Admin
  • 本文由 发表于 2017年9月12日10:47:11
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
什么是跨域?怎么解决跨域? 前端开发

什么是跨域?怎么解决跨域?

跨域:指的是浏览器不能执行其他网站的脚本,它是由浏览器的同源策略造成的,是浏览器对JavaScript施加的安全限制。例如abc.com下面的js不能调用def.com中的js、对象或数据(因为abc...
CentOS 7 安装MongoDB 4.0 操作系统

CentOS 7 安装MongoDB 4.0

MongoDB 是由C++语言编写的,是一个基于分布式文件存储的开源数据库系统,在高负载的情况下添加更多的节点,可以保证服务器性能。MongoDB 旨在为 WEB 应用提供可扩展的高性能数据存储解决方...
如何使用 Jenkins 打包 Vue 项目 操作系统

如何使用 Jenkins 打包 Vue 项目

在前几篇的文章中,我们在 Linux 服务器上安装了一些 Jenkins 所需要的基本配置软件,今天我们来实际的操作一遍,如何使用 Jenkins 来完成 Vue 项目的可持续集成,实现自动拉取代码、...
匿名

发表评论

匿名网友 填写信息

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