作者個人研發(fā)的在高并發(fā)場景下，提供的簡單、穩(wěn)定、可擴(kuò)展的延遲消息隊列框架，具有精準(zhǔn)的定時任務(wù)和延遲隊列處理功能。自開源半年多以來，已成功為十幾家中小型企業(yè)提供了精準(zhǔn)定時調(diào)度方案，經(jīng)受住了生產(chǎn)環(huán)境的考驗。為使更多童鞋受益，現(xiàn)給出開源框架地址：https://github.com/sunshinelyz/mykit-delay

寫在前面

當(dāng)今互聯(lián)網(wǎng)行業(yè)，大部分Web項目基本都是采用的前后端分離模式。前端為H5項目，后端為Java、PHP、Python等項目。而且大部分后端服務(wù)并不會只部署一套服務(wù)，而是會采用Nginx對后端服務(wù)進(jìn)行負(fù)載均衡。那么，此時就會出現(xiàn)一個問題了：如果一個請求url的 協(xié)議、域名、端口 三者之間任意一個與當(dāng)前頁面url不同就會產(chǎn)生跨域的現(xiàn)象。那么如何使用Nginx解決跨域問題呢?接下來，我們就一起探討下這個問題。

為何會跨域?

出于瀏覽器的同源策略限制。同源策略(Sameoriginpolicy)是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會受到影響?？梢哉fWeb是構(gòu)建在同源策略基礎(chǔ)之上的，瀏覽器只是針對同源策略的一種實現(xiàn)。同源策略會阻止一個域的javascript腳本和另外一個域的內(nèi)容進(jìn)行交互。所謂同源(即指在同一個域)就是兩個頁面具有相同的協(xié)議(protocol)，主機(jī)(host)和端口號(port)。

Nginx如何解決跨域?

這里，我們利用Nginx的反向代理功能解決跨域問題，至于，什么是Nginx的反向代理，大家就請自行百度或者谷歌吧。

Nginx作為反向代理服務(wù)器，就是把http請求轉(zhuǎn)發(fā)到另一個或者一些服務(wù)器上。通過把本地一個url前綴映射到要跨域訪問的web服務(wù)器上，就可以實現(xiàn)跨域訪問。對于瀏覽器來說，訪問的就是同源服務(wù)器上的一個url。而Nginx通過檢測url前綴，把http請求轉(zhuǎn)發(fā)到后面真實的物理服務(wù)器。并通過rewrite命令把前綴再去掉。這樣真實的服務(wù)器就可以正確處理請求，并且并不知道這個請求是來自代理服務(wù)器的。

Nginx解決跨域案例

使用Nginx解決跨域問題時，我們可以編譯Nginx的nginx.conf配置文件，例如，將nginx.conf文件的server節(jié)點的內(nèi)容編輯成如下所示。

server { 
        location / { 
            root   html; 
            index  index.html index.htm; 
            //允許cros跨域訪問 
            add_header 'Access-Control-Allow-Origin' '*'; 
 
        } 
        //自定義本地路徑 
        location /apis { 
            rewrite  ^.+apis/?(.*)$ /$1 break; 
            include  uwsgi_params; 
            proxy_pass   http://www.binghe.com; 
       } 
} 

然后我把項目部署在nginx的html根目錄下，在ajax調(diào)用時設(shè)置url從http://www.binghe.com/apistest/test 變?yōu)? http://www.binghe.com/apis/apistest/test然后成功解決。

假設(shè)，之前我在頁面上發(fā)起的Ajax請求如下所示。

$.ajax({ 
        type:"post", 
        dataType: "json", 
        data:{'parameter':JSON.stringify(data)}, 
        url:"http://www.binghe.com/apistest/test", 
        async: flag, 
        beforeSend: function (xhr) { 
 
            xhr.setRequestHeader("Content-Type", submitType.Content_Type); 
            xhr.setRequestHeader("user-id", submitType.user_id); 
            xhr.setRequestHeader("role-type", submitType.role_type); 
            xhr.setRequestHeader("access-token", getAccessToken().token); 
        }, 
        success:function(result, status, xhr){ 
 
        } 
        ,error:function (e) { 
            layerMsg('請求失敗，請稍后再試') 
        } 
    }); 

修改成如下的請求即可解決跨域問題。

$.ajax({ 
        type:"post", 
        dataType: "json", 
        data:{'parameter':JSON.stringify(data)}, 
        url:"http:www.binghe.com/apis/apistest/test", 
        async: flag, 
        beforeSend: function (xhr) { 
 
            xhr.setRequestHeader("Content-Type", submitType.Content_Type); 
            xhr.setRequestHeader("user-id", submitType.user_id); 
            xhr.setRequestHeader("role-type", submitType.role_type); 
            xhr.setRequestHeader("access-token", getAccessToken().token); 
        }, 
        success:function(result, status, xhr){ 
 
        } 
        ,error:function (e) { 
            layerMsg('請求失敗，請稍后再試') 
        } 
    }); 

本文轉(zhuǎn)載自微信公眾號「冰河技術(shù)」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系冰河技術(shù)公眾號。