1. 程式人生 > >Nginx之——解決跨域問題

Nginx之——解決跨域問題

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

nginx作為反向代理伺服器,就是把http請求轉發到另一個或者一些伺服器上。通過把本地一個url字首對映到要跨域訪問的web伺服器上,就可以實現跨域訪問。對於瀏覽器來說,訪問的就是同源伺服器上的一個url。而nginx通過檢測url字首,把http請求轉發到後面真實的物理伺服器。並通過rewrite命令把字首再去掉。這樣真實的伺服器就可以正確處理請求,並且並不知道這個請求是來自代理伺服器的。

具體解決方案如下:

在nginx.conf中編輯

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.lyz.com;
       }
}

然後我把專案部署在nginx的html根目錄下,在ajax呼叫時設定url從http://www.lyz.com/apistest/test變為/apis/apistest/test然後成功解決。

比如我之前請求的Ajax如下:

$.ajax({
        type:"post",
        dataType: "json",
        data:{'parameter':JSON.stringify(data)},
        url:"http://www.lyz.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:"/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('請求失敗,請稍後再試')
        }
    });

至此,問題解決。