【Nginx】在Windows下使用Nginx解決前端跨域問題

提出問題：由於一些歷史緣由，後臺代碼不能動。請求別人的接口拿數據顯示在前端，怎麼辦呢？

分析問題：經過ajax請求。

解決問題：由於瀏覽器的同源策略，因此須要解決跨域問題。（同源策略:請求的url地址，必須與瀏覽器上的url地址處於同域上，也就是域名、端口、協議相同。）

 

帶着問題出發：使用Nginx作反向代理解決跨域問題

1.Nginx下載地址：http://nginx.org/en/download.html

   Nginx中文網：http://www.nginx.cn/doc/

 

 

2.下載完解壓以後的文件目錄

3.使用Notpad++打開conf文件夾下的nginx.conf配置文件並修改，主要修改http的server節點下

 server{
    # 設置本機監聽的端口
    listen       3868;
    # 設置本機ip
    server_name  localhost;
    client_max_body_size 20m;
    location / {
        root   html;
        index  index.html index.htm;
        client_max_body_size 20m;
    }
    # 匹配到/apis開頭的接口時，轉發到下面的服務器地址
    location /apis {
        if ($request_method = 'OPTIONS') { 
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain charset=UTF-8';
            add_header 'Content-Length' 0;
            return 204;
        }
        if ($request_method = 'POST') {
            add_header 'Access-Control-Allow-Origin' *; 
            add_header 'Access-Control-Allow-Credentials' 'true'; 
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; 
            add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
        }
        if ($request_method = 'GET') {
            add_header 'Access-Control-Allow-Origin' *; 
            add_header 'Access-Control-Allow-Credentials' 'true'; 
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; 
            add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
        }
        # 匹配apis以後的路徑和參數
        rewrite  ^.+apis/?(.*)$ /$1 break;
        include  uwsgi_params;
        # 實際調用的API
     proxy_pass http://4.103.63.13:8080;
}

 

HTTPS的：

證書位置和密鑰下載Nginx對應的證書

 

  # HTTPS server
   server {
    listen 443; # 監聽的端口號
    server_name https://pl.com;            # 服務器名稱
    client_max_body_size 100m;                     # 定義讀取客戶端請求大小
    ssl on;
    ssl_certificate test.pem;                      #配置證書位置
    ssl_certificate_key test.key;                  #配置祕鑰位置
    ssl_session_timeout 5m;
    ssl_protocols SSLv3 TLSv1.2;
    ssl_ciphers ECDHE-RSA-AES256-SHA384:AES256-SHA256:RC4:HIGH:!MD5:!aNULL:!eNULL:!NULL:!DH:!EDH:!AESGCM; 
    ssl_prefer_server_ciphers on;
    location / {
        root html; # 靜態資源目錄
        index index.html index.htm;
    }
    location /api {
            proxy_pass https://4:8080; # 設置代理服務器的協議和地址
            proxy_cookie_domain b.test.com  a.test.com; # 修改cookie，針對request和response互相寫入cookie
    }   
}

 

4.修改完成後保存，雙擊nginx.exe運行 或者命令行：nginx.exe

若是修改了配置文件能夠命令行執行：nginx -s reload 從新加載

nginx -s reload # 從新載入配置文件 nginx -s reopen # 重啓 Nginx nginx -s stop # 中止 Nginx

 

5.地址欄輸入配置的端口和servername，檢查是否啓動

 也可在任務管理器中查看：

 

6.ajax調用

GET：這樣實際請求的url是：http://4.103.63.13:8080/Service/getStations/3

  $.ajax({
        url: "http://localhost:3868/apis/Service/getStations/3",
        type: "GET",
        success: function(res) {
            alert(res.code);
        }
    });

 

POST：若是是Ajax跨域ContentType爲application/json請求時，注意使用JSON.stringify轉一下

   var params = {
        Name : "string",
        stationNo: "string"
    };
  
    $.ajax({
        url: "http://localhost:3868/apis/Service/setInfo",
        type: "POST",
        data: JSON.stringify(params),
        contentType: 'application/json',
        success: function(res) {
            alert(res.code);
        }
    });

 

http://jquery.cuishifeng.cn/jQuery.Ajax.html

使用Ajax跨域請求時，若是設置Header的ContentType爲application/json,會分兩次發送請求。第一次先發送Method爲OPTIONS的請求到服務器，這個請求會詢問服務器支持哪些請求方法（GET,POST等），支持哪些請求頭等等服務器的支持狀況。等到這個請求返回後，若是原來咱們準備發送的請求符合服務器的規則，那麼纔會繼續發送第二個請求，不然會在Console中報錯。

爲何在跨域的時候設置ContentType爲application/json時會請求兩次？其實JQuery的文檔對此有作說明。

contentType (default: 'application/x-www-form-urlencoded; charset=UTF-8')

Type: Boolean or String

When sending data to the server, use this content type. Default is "application/x-www-form-urlencoded; charset=UTF-8", which is fine for most cases. If you explicitly pass in a content-type to $.ajax(), then it is always sent to the server (even if no data is sent). As of jQuery 1.6 you can pass false to tell jQuery to not set any content type header. Note: The W3C XMLHttpRequest specification dictates that the charset is always UTF-8; specifying another charset will not force the browser to change the encoding. Note: For cross-domain requests, setting the content type to anything other than application/x-www-form-urlencoded, multipart/form-data, or text/plain will trigger the browser to send a preflight OPTIONS request to the server.

注意Note後面的描述，在跨域的時候，除了contentType爲application/x-www-form-urlencoded,multipart/form-data或者text/plain外，都會觸發瀏覽器先發送方法爲OPTIONS的請求。

好比說，你原來的請求是方法方法POST，若是第一個請求返回的結果Header中的Allow屬性並無POST方法，那麼第二個請求是不會發送的，此時瀏覽器控制檯會報錯，告訴你POST方法並不被服務器支持。

 

作到這裏能夠說完美解決了，可是前面說了是歷史緣由，確定要在IE8上試試，啥反應都沒有

在js里加上這段話便可~

jQuery.support.cors = true;

這句話的意思就是指定瀏覽器支持跨域。IE9以上版本的瀏覽器、谷歌、火狐等都默認支持跨域，而IE八、9卻默認不支持跨域，須要咱們指定一下。

 

注意：接口API和Nginx只能一處配置跨域，若是API後臺配置了容許跨域請求，Nginx就不能配置跨域了，否則會報錯：but only one is allowed. Origin 

完~