1. 程式人生 > >在用AJAX跨域請求時遇到的問題

在用AJAX跨域請求時遇到的問題

剛剛接觸ajax就遇到一個詞--跨域。

在我百度了各種資料以後總結了一句話:“只要不是在一個協議、域、名埠下,都屬於跨域(127.0.0.1本地也屬於跨域)”。

在做ajax請求的時候,請求不到並且瀏覽器會報錯,錯誤如下:

XMLHttpRequest cannot load http://xxxxxxNo 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://xxxxxxx' is therefore not allowed access.

我在查閱跨域的資料之後,學了兩種解決跨域問題的方法。

一、設定header頭執行ajax跨域

這步前端不需要做什麼,正常使用dataType : 'json',和post請求。

只需要後臺設定允許跨域。程式碼如下:

// 指定允許其他域名訪問

httpServletResponse.setHeader("Access-Control-Allow-Origin", "*");

// 響應型別

httpServletResponse.setHeader("Access-Control-Allow-Methods", "POST");

// 響應頭設定

httpServletResponse.setHeader("Access-Control-Allow-Headers", "x-requested-with,content-type");

Access-Control-Allow-Origin:* 表示允許任何域名跨域訪問,由於設定*存在安全隱患,建議將*改成你想允許的域名。

看到一篇文章說只設置Access-Control-Allow-Origin這一個屬性也可以允許跨域。

二、允許jsonp跨域

php程式碼

//需要獲取的資料

$data = array('id'=>1, 'name'=>'ityangs');

//設定引數名

$callback = $_GET['callback'];

//輸出

echo $callback.'('.json_encode($data).')';

//退出

exit;

 

輸入的結果是:'users({'id': 1, 'name': 'ityangs'})'

前端程式碼

$.ajax({

    type : "get",//jsonp的本質是利用script標籤的src屬性進行跨域請求,只能用於get請求。

    url : "ajax.php",

    dataType : "jsonp",

    jsonp: "callback",//傳遞給請求處理程式或頁面的,用以獲得jsonp回撥函式名的引數名(預設為:callback)

    jsonpCallback:"success_jsonpCallback",//自定義的jsonp回撥函式名稱,預設為jQuery自動生成的隨機函式名

    success : function(json){

        alert('success');

    },

    error:function(){

        alert('fail');

    }

});

由於個人見識有限,又是個渣前端,如有差錯,請多多見諒,並提出修改辦法,勿噴。