nginx 反向代理，支持跨域，先後分離

前端開發每每涉及到跨域問題，其中解決方案不少：

      1.jsonp 須要目標服務器配合一個callback函數。

　　2.window.name+iframe 須要目標服務器響應window.name。

　　3.window.location.hash+iframe 一樣須要目標服務器做處理。

　　4.html5的 postMessage+ifrme 這個也是須要目標服務器或者說是目標頁面寫一個postMessage，主要側重於前端通信。

　　5.CORS  須要服務器設置header ：Access-Control-Allow-Origin。

　　6.nginx反向代理 這個方法通常不多有人說起，可是他能夠不用目標服務器配合，不過須要你搭建一箇中轉nginx服務器，用於轉發請求。

我的以爲6纔是正規的解決方案。這裏給你們介紹一下如何使用nginx作跨域

因爲本人使用MAC，下面的命令都是在MAC環境下的，如須要windows,可同步轉化

1.nginx 安裝

　　經過homeBrew 安裝nginx   

　　命令行：　brew install nginx    安裝完畢後，

　　輸入nginx -v 出現版本號，則安裝成功 （homebrew 如何安裝就不敘述了）   　

2.修改nginx的配置文件　

       文件名：nginx.conf    路徑/usr/local/etc/nginx/nginx.conf

　　這是最簡單的配置

 

           如下代碼能夠直接複製 全覆蓋nginx.conf 文件。

 

　　　　worker_processes  1;

　　　　events {

    　　　　worker_connections  1024;

　　　　}

  

　　　　http {

    　　　　include       mime.types;

    　　　　default_type  application/octet-stream;

    　　　　sendfile        on;

    　　　　keepalive_timeout  65;

  　　　　  server {

 　　　　       listen       805;    #開闢啓動805 端口，原文件是8080端口，因爲不少地方使用8080端口，因此此處改成805

  　　　　     

  　　　　      server_name  localhost; # 當前服務的域名

     　　　　   access_log on;

   　　　　     access_log  logs/host.access.log  ;

  　　　　      location / {

  　　　　          #8080端口號是第一步開啓的本地服務端口號 

  　　　　          proxy_pass http://localhost:8080;     

　　　　         

   　　　　     }

        

 　　　　       location /uc {                 

　　　　　　　　#uc 是對應的ajax 請求的地址，uc下全部請求都會被重寫到http://qa.cx-psi.wmdev2.lsh123.com/去作請求，就能夠實現跨域了

 　　　　           rewrite ^/(.*)$ /$1 break;

　　　　            proxy_pass http://qa.cx-psi.wmdev2.lsh123.com/;

　　　　        }

    　　　　    location /basic {  

   　　　　         #每有一個新的代理需求，就新增一個location，同上

  　　　　          #反向代理，達到先後端分離開發的目的

 　　　　           rewrite ^/(.*)$ /$1 break;

 　　　　           # include uwsgi_params;

 　　　　           proxy_pass http://qa.cx-psi.wmdev2.lsh123.com/;

 　　　　       }

  　　　　  }

 

　　　　　　    include servers/*;

　　　　}

 

3.  跨域步驟

    1.在完成了對nginx的配置文件修改後，

     首先啓動本地服務，不管是gulp,webpack,fis3 ，都會跑一個本地服務起來，訪問地址是8080 

    如圖：這裏的訪問地址是IP：8080  也能夠用localhost:8080 來訪問　

     很明顯，能夠看出，所有跨域抱紅了。

   

 

      這個時候，啓nginx 服務， 啓動成功後，訪問localhost：805端口 ，便可實現跨域

　　　　　　

     

    再次配合圖片解釋下，這裏location /basic   這個basic 是本身手動配置的  指的是 請求的路徑，

   也就是說，每個不一樣的接口路徑 都須要配置一次。而proxy_pass 對應的則是目標後端服務器域名

　　　　　　location /basic {  

   　　　　         #每有一個新的代理需求，就新增一個location

  　　　　          #反向代理，達到先後端分離開發的目的

 　　　　           rewrite ^/(.*)$ /$1 break;

 　　　　           # include uwsgi_params;

 　　　　           proxy_pass http://qa.cx-psi.wmdev2.lsh123.com/;

 　　　　       }

　　　　

 

 　　　　　　　       是否是很簡單哇。 快動手試試吧！

　　Ps：可能須要用到的命令

　　　　 ###nginx5個命令

　　　　nginx 啓動nginx

　　　　ps -ef|grep nginx 查看已啓動的nginx服務進程

　　　　Kill -TERM 15800 （馬上中止） 【15800：上面一個命令會看到這個進程號】

　　　　sudo nginx -t 檢驗配置文件是否有錯誤（sudo: /usr路徑下資源須要管理員權限）

　　　　sudo nginx -s reload reload nginx配置文件

　　　　###nginx 配置文件

　　　　/usr/local/etc/nginx/nginx.conf （配置文件路徑）