【Ajax】同源策略、跨域和JSONP

这篇文章距离上次修改已过205天，其中的内容可能已经有所变动。

同源策略（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函数，并将数据作为参数传递进来。

【Ajax】同源策略、跨域和JSONP

评论已关闭

推荐阅读