core.min.js:36 XMLHttpRequest cannot load http://【位址】. No 'Access-Control-Allow-Origin' header is pr

2015-12-13 23:50:00

core.min.js:36 XMLHttpRequest cannot load http://【位址】. No 'Access-Control-Allow-Origin' header is present

on the requested resource. Origin 'http://192.168.1.222:8080' is therefore not allowed access.

今天一個Ajax跨域問題，糾結我半天

<html>
<head>
<title>title</title>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$.ajax({
url:"http://map.oicqzone.com/gpsApi.php?lat=22.502412986242&lng=113.93832783228",
type:'GET',
success: function(data){
$('body').append( "Name: " + data );
}
});
</script>
</head>
<body> 測試Ajax跨域問題
</body>
</html>

沒有結果，

用F12 下檢視錯誤得知：XMLHttpRequest cannot load http://map.oicqzone.com/gpsApi.php?lat=22.502412986242&lng=113.93832783228.

Origin http://localhost is not allowed by Access-Control-Allow-Origin. AJAX跨域問題産生。

搜了好久，得知解決方案：

一：使用jsonp格式，如jquery中ajax請求參數 dataType:'JSONP'。

<html>
<head>
<title>title</title>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$.ajax({
url:"http://map.oicqzone.com/gpsApi.php?lat=22.502412986242&lng=113.93832783228",
type:'GET',
dataType:'JSONP',
success: function(data){
$('body').append( "Name: " + data );
}
});
</script>
</head>
<body>
測試Ajax跨域問題

二，server端加上header設為 Access-Control-Allow-Origin：*

header("Access-Control-Allow-Origin: *"); # 跨域處理

問題就解決了。

繼續閱讀