准备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解决跨域方式1

使用文本编辑器打开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解决跨域方式2

配置nginx，给api添加允许跨域请求头信息，“欺骗”浏览器服务端是允许跨域的，相比方式1这种方式更常用

        location /api {
            proxy_pass   http://88.128.19.209:8081/api/;
            add_header Access-Control-Allow-Methods *;
            add_header Access-Control-Max-Age 3600;
            add_header Access-Control-Allow-Credentials true;
            add_header Access-Control-Allow-Origin $http_origin;
            add_header Access-Control-Allow-Headers $http_access_control_request_headers;

            if ($request_method = OPTIONS ) {
                return 200;
            }
        }