调程序时遇到“已拦截跨源请求:同源策略禁止读取位于……的远程资源”,这是因为通过ajax调用其他域的接口会有跨域问题。
解决方法如下:
方法一:服务器端(PHP)设置header头,实现跨域访问
示例:
// PHP
<?php
header('Access-Control-Allow-Origin:*');
$name = $_POST['username'];
$address = $_POST['address'];
# code...
echo json_encode(array(
'status' => 1,
'msg' => 'success'
));
// JS
$.ajax({
type: "POST",
url: "http://127.0.0.1/jsonp.php",
dataType: "json",
data: {
'username':username,
'address':address
}
success: function(res) {
# code...
});
方法二:JSONP跨域访问
JSONP全称JSON with Padding,是用于解决AJAX跨域问题的一种方案。在jquery中就有封装,通过ajax请求多带上一个jsonp的参数即可。
示例:
// PHP
<?php
$name = $_GET['username'];
$address = $_GET['address'];
$callback = $_GET['callback']; // 最好加上判空和默认值,以防拿不到参数
$result = json_encode(array( // 模拟返回值
'status' => 1,
'msg' => 'success'
));
echo $callback . "(" . $result . ")";
// JS
$.ajax({
type: "GET",
url: "http://127.0.0.1/jsonp.php",
dataType: "jsonp",
jsonp: "callback",
data: {
'username':username,
'address':address
}
success: function(res) {
# code...
});
// 也可以写成
$.ajax({
type: "GET",
url: "http://127.0.0.1/jsonp.php?username="+username+"&address="+address,
dataType: "jsonp",
jsonp: "callback",
success: function(res) {
# code...
});
});