使用 AJAX 时阻止跨域请求答案

【问题标题】：Cross-origin request blocked when using AJAX使用 AJAX 时阻止跨域请求
【发布时间】：2014-06-17 17:42:51
【问题描述】：

嘿，我刚刚在同一主机上安装了脚本，两次，只是不同的帐户。脚本运行良好，但由于随机原因，其中一个开始丢弃所有 AJAX 请求，并在 Mozilla 中打印以下消息：

跨域请求被阻止：同源策略不允许读取位于http://www.yoursite.com/vote/ajax/xmlhttp/claim 的远程资源。这可以通过将资源移动到同一域或启用 CORS 来解决。

当我直接访问链接时，工作正常，但使用 AJAX 时它会失败.. 在另一个帐户（主机帐户）上它到目前为止工作正常。

在我的 VPS 和 pc 上运行良好。

在 PHP 错误日志中，它会打印未定义的变量，这实际上是不可能的，AJAX 如何影响这一点，尤其是在这种随机情况下，它在哪里工作，有时现在在这个主机上。

我的 JS：

    var reward = $("#rewards ul li");
    var selected = [];
    var limit = <?php echo $limit; ?>;
    var errors = $(".error");
    var timeout;

    console.log(limit);

    $("#claim").click(function() {
        $("#claim").text('Checking...');
        if ($("#username").val() == "") {
            $("#claim").text('Claim my reward(s) now');
            showError("Fill in your in-game username.");
            return;
        }
        if (selected.length == limit) {
            $.ajax({
                type: "POST",
                url: "<?php echo $post_url; ?>",
                data: {username: $("#username").val(), rewards: JSON.stringify(selected)},
                success: function(data) {
                    $("#claim").text('Claim my reward(s) now');
                    if (data.substr(0, 6) == 'error:') {
                        showError(data.substr(6));
                    }
                    else {
                        $("#claim").text('Success!');
                        $(".section").html(data);
                    }
                }
            });
        }
        else {
            showError("You must select " + limit + " rewards(s) to continue.");
        }
    });

如果您也需要我使用的功能，请告诉我。

是什么导致了这个问题？

我尝试添加以下响应：

if (isset($_SERVER['HTTP_ORIGIN'])) {
    header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
    header('Access-Control-Allow-Credentials: true');
    header('Access-Control-Max-Age: 86400');    // cache for 1 day
}

但这很糟糕，因为它仍然会有未定义的变量，并且仍然会处理会导致 JavaScript 语法错误的响应。

感谢您的建议。

【问题讨论】：

如果没有正确的 CORS 标头，则不允许跨域请求。标题到底是什么样的（来自浏览器开发者控制台）？
尝试在type或url下的Ajax中添加crossDomain:true
试试header('Access-Control-Allow-Origin: *');
这些选项都没有帮助，遇到同样的问题。 @Unlink 同样的问题，发送的页面有语法错误。

标签： javascript php jquery ajax

【解决方案1】：

如果我理解正确，您正在尝试在不同服务器之间传递数据；答案是 JSONP，它像 JSON 一样工作，但应该通过那个 CORS 问题。为此，您需要稍微更改一下您的 php 代码和 ajax 代码。

在 php 中，您需要将 JSON 数据包装在回调中，而在 AJAX 中，您需要定义 - dataType：“jsonp”，在此处阅读有关 jsonp 的更多信息：What is JSONP all about?。它对我有用！

【讨论】：