在服务器端设置Access-Control-Allow-Origin
响应头可以允许特定的外部域访问资源。如果要允许所有域,可以设置为*
。
以下是一个简单的PHP示例,展示如何设置响应头来允许跨域请求:
<?php
header("Access-Control-Allow-Origin: *"); // 允许所有域
header("Content-Type: application/json");
// 你的数据
$data = array('name' => 'John', 'age' => 30);
// 输出JSON格式的数据
echo json_encode($data);
?>
对于JSONP
方式,前端需要使用jsonp
类型发起请求,并提供一个callback
函数名给服务器。服务器端需要将这个函数名和数据包装在一起返回。
以下是一个简单的JavaScript使用JSONP
的例子:
$.ajax({
url: "http://example.com/api/data",
type: "GET",
dataType: "jsonp", // 指定为jsonp类型
jsonpCallback: "callbackFunction", // 服务器端用于包装响应的函数名
success: function(data) {
console.log(data);
},
error: function(jqXHR, textStatus, errorThrown) {
console.error("Error with JSONP request:", textStatus, errorThrown);
}
});
// 回调函数,需要在全局作用域内定义
function callbackFunction(data) {
console.log(data);
}
服务器端的JSONP
响应可能看起来像这样:
<?php
$data = array('name' => 'John', 'age' => 30);
$callback = $_GET['callback']; // 获取传递的callback函数名
// 输出JSON格式的数据,并用callback函数包装
echo $callback . '(' . json_encode($data) . ');';
?>
请注意,JSONP
通常不如CORS方便安全,且仅支持GET
请求。如果可能,最好使用CORS。