使用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）屬性