需要身份验证时,带有JSON的跨源AJAX请求中断

时间:2015-02-25 19:49:40

标签: php ajax json jsonp cors

我正在尝试对另一个站点上的PHP文件进行AJAX调用:

$.ajax({                                      
    type: "GET",
    dataType: "json",
    url: 'http://user:password@www.myurl.com/myphpfile.php',
    data: {
        records: JSON.stringify(workingarray),
        account: account,
    },

    complete: function(response) {
        var parsedresponse = $.parseJSON(JSON.stringify(response)).responseText.split("<br>");
        otherFunction(parsedresponse);
    }
});

我的PHP文件:

<?php
header('Access-Control-Allow-Origin: *');
header('content-type: application/json; charset=utf-8');

$records = json_decode($_GET['records']);
$account = $_GET['account'];

 .....[LOGIN AND SQL QUERY].....

$result = $conn->query($sql);

while ($row = $result->fetch_assoc()) {
    echo json_encode($row['Some columns']."<br>", JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
    }

$conn->close();
?>

这一切都很有效,直到我注意到我实际上没有启用身份验证。一旦我这样做,整个事情就崩溃了,我总是得到以下错误:

  

XMLHttpRequest无法加载   http://user:password@www.myurl.com/myphpfile.php(...)。没有   &#39;访问控制允许来源&#39;标题出现在请求的上   资源。起源&#39; http://originurl.co.uk&#39;因此是不允许的   访问。响应的HTTP状态代码为401。

正如您将从我的PHP代码中看到的那样,存在一个标题。我也尝试在我的.htaccess中添加以下两行:

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Credentials true

令人沮丧的影响很小,也就是说,没有任何影响。

我试图将数据类型转换为JSONP,但我不确定如何执行此操作...我尝试了以下更改:

$.ajax({                                      
    type: "GET",
    dataType: "jsonp",
    url: 'http://user:password@www.myurl.com/myphpfile.php?callback=?',
    data: {
        records: JSON.stringify(workingarray),
        account: account,
    },

    complete: function(response) {
        var parsedresponse = $.parseJSON(JSON.stringify(response)).responseText.split("<br>");
        otherFunction(parsedresponse);
    }
});

我的PHP文件:

<?php
header('Access-Control-Allow-Origin: *');
header('content-type: application/jsonp; charset=utf-8');

...

while ($row = $result->fetch_assoc()) {
    echo $_GET['callback'] . "(" . json_encode($row['Some columns']."<br>", JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) . ")";
    }

$conn->close();
?>

据我所知,这并没有导致控制台出错,但我在回复中唯一能理解的是:

  

状态:200

     

statusText:&#34;加载&#34;

(我为console.log(parsedresponse)函数添加了complete:行以进行调试,但我必须承认我并不完全确定如何解释我所看到的大部分内容。)

任何帮助或建议都会非常感激,因为这会让我感到非常沮丧。

1 个答案:

答案 0 :(得分:0)

我相信我已经解决了这个问题 - 我还没有完全重写这个应用程序,但我能够打电话并得到一个回应所以它应该从这里开始一直都是明确的(着名的最后一句话,哈哈)。

无论如何,我所做的更改如下 - 我首先在AJAX调用中切换complete success

$.ajax({                                      
    type: "GET",
    dataType: "jsonp",
    url: 'https://user:password@www.myurl.com/myphpfile.php?callback=?',
    data: {
        records: JSON.stringify(workingarray),
        account: account,
    },
    success: function(response) {
        console.log(response);
        otherFunction(response);
    }
});

然后,我认为这可能是主要问题,我不得不重写PHP文件的这一部分......

$result = $conn->query($sql);

while ($row = $result->fetch_assoc()) {
    echo json_encode($row['Some columns']."<br>", JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
    }

......成为:

$result = $conn->query($sql);
$rows = array();

while ($row = $result->fetch_assoc()) {
        $rows[] = array('data' => $row['Some columns']);
    }

echo $_GET['callback'] . "(" . json_encode($rows, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) . ")";

...显然(回想起来)我以前的方法是返回多个具有相同名称的函数。

我还将请求网址更改为https,我认为这应该足够安全以用于预期用途。

无论如何希望有人发现我的经验有用。