【Ajax】同源策略、跨域和JSONP
同源策略（Same-origin policy）是一种安全机制，它限制了一个源的文档或脚本如何与另一个源的资源进行交互。这里的源指的是协议、域名和端口号的组合。
当你遇到需要从不同源（域名、协议或端口不同）的服务器请求数据时，你可能会听到一个词：“跨域”（Cross-Origin Resource Sharing, CORS）。为了安全地进行跨域请求，服务器可以发送一些特殊的响应头，例如Access-Control-Allow-Origin，允许某些或所有源进行跨域请求。
JSONP（JSON with Padding）是一种跨域请求数据的方式，它通过动态创建<script>标签并请求一个带有回调函数的JSON数据来实现。由于<script>标签请求的脚本不受同源策略的限制，因此可以用来跨域获取数据。
以下是一个JSONP的简单示例：
<!DOCTYPE html>
<html>
<head>
<title>JSONP Example</title>
</head>
<body>
<h2>Fetch Data from Different Origin</h2>
<script>
// 定义一个回调函数
function handleResponse(data) {
console.log('Received data:', data);
}
// 动态添加<script>标签来请求跨域的JSON数据
var script = document.createElement('script');
script.src = 'https://example.com/api/data?callback=handleResponse';
document.head.appendChild(script);
</script>
</body>
</html>在上面的例子中，我们假设https://example.com/api/data?callback=handleResponse是一个返回JSON数据的URL，并且这个URL支持JSONP请求。服务器端需要将请求的数据包装在回调函数中，例如：
handleResponse({"key": "value"});这样，当<script>标签加载并执行这段代码时，它将触发我们页面上定义的handleResponse函数，并将数据作为参数传递进来。
评论已关闭