当需要身份验证时，使用 JSON 的跨源 AJAX 请求中断

Question

我正在尝试对另一个站点上的 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 cannot load http://user:password@www.myurl.com/myphpfile.php (...) . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://originurl.co.uk' is therefore not allowed access. The response had HTTP status code 401.

正如您将从我的 PHP 代码中看到的那样，存在一个 header。我还尝试将以下两行添加到我的 .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();
?>

据我所知，这不会导致控制台出现错误，但我在响应中唯一能理解的是：

status: 200

statusText: "load"

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

任何帮助或建议将不胜感激，因为这让我很沮丧。

Answer 1

我相信我已经解决了这个问题——我还没有完全重写应用程序，但我能够拨打电话并得到回应，所以从现在开始一切应该都是一帆风顺的（著名的遗言，哈哈).

无论如何，我所做的更改如下 - 我首先在 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，我认为对于预期用途来说应该足够安全。

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

当需要身份验证时，使用 JSON 的跨源 AJAX 请求中断

Cross origin AJAX request with JSON breaks when authentication is required

php

ajax

json

jsonp

cors