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


Cross origin AJAX request with JSON breaks when authentication is required

我正在尝试对另一个站点上的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(…)。否请求的上存在"Access Control Allow Origin"标头资源原点'http://originurl.co.uk因此不允许通道响应的HTTP状态代码为401。

然而,正如您将从我的PHP代码中看到的,存在一个标头。我还尝试在.htaccess:中添加以下2行

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

状态文本:"加载"

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

任何帮助或建议都将不胜感激,因为这给我带来了很多挫折。

我相信我已经解决了这个问题-我还没有完全重写应用程序,但我可以进行调用并得到响应,所以从现在开始一切都应该一帆风顺(著名的最后一句话,哈哈)。

无论如何,我所做的更改如下——我首先在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) . ")";

很明显(回想起来),我以前的方法是返回多个同名函数。

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

无论如何,希望有人觉得我的经验有用。