ajax完美解決跨域問題(jsonp、nginx反向代理)

做過web前端人都知道,經常會有ajax跨域問題,下面列舉我經常使用的解決辦法
第一種:使用jsonp,jQuery的ajax方法支持jsonp,但是最大的缺點就是只支持get方式,而且服務端也要修改
客戶端 test.html代碼

<!DOCTYPE html>  
<html>  
<head>  
    <title>工作端</title>  
    <meta name="viewport" content="width=device-width,initial-scale=1.0">  
    <meta charset="utf-8">  
    <script src="jquery-1.10.2.min.js"></script>  
    <style>  
    </style>  
</head>  
  
<body>  
<input type="button" value="測試" id="demo">  
<div id="result">  
  
</div>  
<script>  
$(document).ready(function() {  
    var cache = {};  
    $("#demo").click(function(){  
        $.ajax({  
            type : "get",   
            async:false,  
            data:{"name":"test001","age":"100"},  
            url : "http://192.168.10.111/server.php", //跨域請求的URL  
            dataType : "jsonp",  
            //傳遞給請求處理程序,用以獲得jsonp回調函數名的參數名(默認為:callback)  
            jsonp: "callback",  
            //自定義的jsonp回調函數名稱,默認為jQuery自動生成的隨機函數名  
            jsonpCallback:"success_jsonpCallback",  
                //成功獲取跨域服務器上的json數據后,會動態執行這個callback函數  
            success : function(json){   
                alert(json,name);  
            }  
        });  
    });  
})  
</script>  
</body>  
</html>  

第二種:nginx反向代理,我的nginx版本nginx-1.10.0
首先在 conf\apiserver-reverse-proxy-conf\bingli\main.conf ,沒有相關目錄和文件就新

location ~* ^/uc/.*{  
    proxy_set_header Host $host;  
    proxy_set_header X-Real-Ip $remote_addr;  
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;  
    proxy_pass http://192.168.10.111:8080;  
}

然后在nginx主配置文件添加加粗內容,即把代理文件加載進來

location / {  
            root   html;  
            index  index.html index.htm;  
        }  
include apiserver-reverse-proxy-conf/bingli/main.conf;  

重啟nginx,之后ajax發請求到
http://localhost/uc/aa
http://localhost/uc/bb?token=xxxx
都會被轉發到
http://192.168.10.111:8080/uc/aa
http://192.168.10.111:8080/uc/bb?token=xxxx

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容