使用nginx实现纯前端跨越

1. 你是否厌倦了总是依赖后台去处理跨域，把握不了主动权
2. 你是否想模仿某个app倒腾一个demo，却困于接口没法跨域

那么很幸运，接下来我将现实不依赖任何后台，为所欲为的想访问哪一个域名就访问哪一个！

下载nginx

地址： http://nginx.org/en/download.html
注意： 存放目录中不能含有中文

nginx配置

强大的nginx反向代理工具，有不少东西值得咱们去研究，这里我只贴出核心代码，其余的还有待深刻。例如我想作一个豆瓣的高仿app，调用 搜索图书接口

• 本应该调用的地址 //api.douban.com/v2/book/search?q=解忧杂货店&tags=12

• 本地电脑ip：192.168.1.168
• 本地React工程访问地址：192.168.1.168:404
• 实现跨域后React工程访问地址：192.168.1.168

• 实现跨域后豆瓣接口调用的地址： //192.168.1.168/douban/v2/book/search?q=解忧杂货店&tags=12

nginx.conf server

完整配置文件

https://github.com/helijun/react-learn/blob/master/nginx/conf/nginx.conf

启动nginx

将上面的配置文件替换你本地的nginx.conf
更改ip地址，server监听端口
cd到nginx存放的根目录

start nginx.exe

到此为止，大功告成，没错就是这么简单。测试效果：

另外附上nginx经常使用的几个命令

start nginx.exe //启动
nginx.exe -s reload //重启
nginx.exe -s stop //快速中止
nginx.exe -s quit //完整有序中止

总结

其实前端跨域问题在如今的先后端分离的项目中，应该是说广泛存在的，以前也写过相关的文章总结 jsonp跨域请求、优雅的封装ajax，含跨域，可是都基本上是要后台配合的，而且还有不少局限性。那么如今这种方式，就真的很为所欲为的，好比我如今还想代理到百度的api，那么只要在那个server中再添加一个location便可，如：

location /baidu {
        rewrite  ^/baidu/(.*)$ /$1 break;
        proxy_pass   https://api.baidu.com;
}

注意事项

或许你发现了，全部的请求都添加了一个'douban'前缀，那么在真实的项目中，务必将这个前缀设置为一个变量，而后全部的ajax请求url都拼接这个前缀，防止后续若是有变动致使牵一发而动全身。

固定ip

为了防止ip变化致使nginx配置失效，我这里固定ip为 192.168.1.168

打开网络和共享中心->本地链接->属性->双击Internet协议版本4（TCP/IPv4）属性