跨域 AJAX 请求的挑战与应对之道：一文搞定

javascript

2024-03-14 17:37:39

跨域 AJAX 请求的难题与解决之道

跨域 AJAX 请求是什么？

跨域 AJAX 请求是指当 AJAX 请求的 URL 与发起请求的脚本位于不同的域时，会触发的错误。这是由于浏览器实施了同源策略，一种安全措施，旨在防止恶意脚本访问敏感信息。

解决跨域 AJAX 请求

有几种方法可以解决跨域 AJAX 请求的问题：

JSONP (JSON with Padding) ：JSONP 利用 <script> 标签的跨域能力，将 JSON 数据包装在函数调用中，并将其作为参数传递给回调函数。
CORS (跨域资源共享) ：CORS 是 HTTP 头，允许服务器指定哪些域可以访问其资源。服务器端需要设置适当的标头，例如 Access-Control-Allow-Origin。
服务器端代理 ：使用服务器端代理可以绕过同源策略，代理充当中间人，从目标域获取数据并将其转发给发起请求的脚本。

实际案例：使用 JSONP

考虑一个使用 JSONP 来获取另一个域上的数据的示例：

<script src="scripts/jq.js" type="text/javascript"></script>
<script>
    $(function() {
        $.ajax({
            url: "http://testserver.php",
            dataType: "jsonp",
            jsonp: "callback",
            success: function(data) {
                alert("Success");
                console.log(data);
            },
            error: function() {
                alert("Error");
            }
        });
    });
</script>

// testserver.php
<?php
$arr = array("element1",
             "element2",
             array("element31","element32"));
$arr['name'] = "response";
echo "callback(".json_encode($arr).")";
?>