准备nginx

• 下载nginx

去nginx官网下载最新版nginx.目前(2017年11月13日)最新版是1.13.6.本文以windows为例.

• 运行nginx

下载完成解压到某目录.如我解压到D盘根目录
进入nginx-1.13.6目录,双击nginx.exe启动nginx,启动界面会一闪而过
使用浏览器访问http://localhost/,看到欢迎节目就说明启动ok啦

注:nginx默认启动的是80端口,而http访问不加端口,访问的就是80端口,https不加端口访问的是443端口.所以我们访问http://localhost/其实访问的是http://localhost:80/只不过刚好可以省略80端口.如果修改了nginx启动端口不是80,那访问就肯定需要加上端口访问.

• 停止nginx

nginx启动成功会创建两个进程,我们杀掉这两个进程就停止nginx了
进入任务管理器进程tab页,右键nginx进程,选择结束进程即可

也可以在nginx目录下,新建一个.bat文件.里面内容是nginx -s stop.双击这个.bat文件,也可以停止nginx.

注:有时候双击.bat文件也不能停止nginx,最好检查进程中是否还存在nginx进程.如果存在再双击一次.

准备应用服务

• 首先先保证app和后台服务已经启动
• 如下图,我的app启动在http://88.128.18.144:8100/,后台api服务启动在http://88.128.18.144:8081/api/.两个ip地址端口不一样,肯定存在跨域问题

app已经启动
后台已经启动

注:88.128.18.144就是我本地ip,也可以用localhost访问.我这里演示统一用ip

使用nginx解决跨域

• 使用文本编辑器打开nginx.conf文件,这是nginx的配置文件

• 配置nginx.conf解决跨域,如下图是我新加的配置
  

location /app/ {
  proxy_pass http://88.128.18.144:8100/;
}
        
location /api/ {
  proxy_pass http://88.128.18.144:8081/api/;
}

• 启动nginx(没有停止的先停止)

• 由于我们的配置还是在80端口下,现在访问不加端口,或者说现在访问都是80端口.如下图.此时ip和端口一致了.所以就不存在跨域问题啦.

  
  
  

• 最后记得修改app的请求地址.新地址没有端口了.现在app和后台服务同ip同端口,nginx帮我们代理到原来的地址

注:现在也没有options请求了

最后

• 其他解决跨域的方法可以看这里

• nginx是很强大的,在实际项目使用中还有很复杂的配置规则和方式.如下图,各位想要深入请自行学习.可以百度"nginx配置文件详解"

  
  image.png

• nginx中文文档