准备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;
}
}
其他
- 跨域等许多nginx配置可能比较常用，可以把其放入单独文件中，然后include，这样其他api都可以include这个公共配置
