我正在尝试使用 Jquery 和 PHP/Symfony(HttpFoundation 组件)进行一些跨站点脚本编写，但我无法让服务器返回必要的数据。

我的目标是让 JQuery 从本地域检索 JSON:PHP 访问服务器端的外部 API。我已经打开 Access-Control-Allow-Origin header 到 * 以允许 CORS 正常，并且直接使用虚拟数据一切正常。但是，通过 JQuery 使用 JSON 端点失败。一切都发生在同一个域上。

因此，如果我手动创建一个 JSON 响应，这个虚拟 JSON 数据可以很好地呈现:

$data = json_decode('{
        "foo": "bar",
        "items": [
            {
                "id": "1234",
                "foo": "bar",
                "baz": "bingo",
            },
            {
                "id": "4567",
                "foo": "blork",
                "baz": "fladdurk",
            }
    }', true);

$response = JsonResponse::create($data, 200);
$response->headers->set('Access-Control-Allow-Origin', '*');
$response->send();

JSON 在我的客户端中显示很好，位于 http://localhost/json_endpoint?q=stuff。我得到一个很好的 JSON 字符串:

{"foo":"bar","items":[{"id":"1234","foo":"bar","baz":"bingo"},{"id":"4567","foo":"blork","baz":"fladdurk"}]}

在前端使用 JQuery 也能很好地工作。虚拟数据看起来完全一样，我可以使用它；当 JSON 不是来自外部 API 时，大概 Symfony 不介意提供它。

如果我尝试向外部 API(这是数据应该来自的地方)发出 PHP 请求，事情就会开始变得奇怪:

protected function url_tools__request($url, $timeout=10, $headers=array()) {
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_TIMEOUT, $timeout);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); //suppress output.
    curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
    $ch_exec = curl_exec($ch);
    curl_close($ch);
    return $ch_exec;
}

$url = "http://api.example.com/?q=more+stuff";
$headers = array("Accept:application/json");

$xsr = $this->url_tools__request($url, 10, $headers);
$data = [
    "foo" => "bar",

    // here's the rub
    "items" => json_decode($xsr, true),
];

$response = JsonResponse::create($data, 200);
$response->headers->set('Access-Control-Allow-Origin', '*');
$response->send();

有了这个实时数据，如果直接在 http://localhost/json_endpoint?q=stuff 访问，所有内容都会正确显示在客户端中。所以 API 工作正常。我得到与上面完全相同的完整 JSON 字符串:

{"foo":"bar","items":[{"id":"1234","foo":"bar","baz":"bingo"},{"id":"4567","foo":"blork","baz":"fladdurk"}]}

但是如果我尝试通过 JQuery AJAX(可能在 http://localhost/another_page.html)访问这个端点，我会得到一个没有任何“项目”的 JSON 字符串:

{"foo":"bar","items":[]}

我的 JQuery 代码如下所示:

xhr = $.ajax({
    url: '/json_endpoint',
    data: {q: "more+stuff"},
    type: "GET",
    dataType : "json"
})
.done(function(data, textStatus, request) {
    console.log(data)
}

我从各个角度查看了我的请求和响应，无论使用虚拟数据还是实际 (XSS) 数据，PHP/Symfony 解析的字符串都是相同的。我很确定没有竞争条件或任何东西。

知道我做错了什么吗？提前致谢。

最佳答案

原来 CORS 的东西完全是转移注意力的东西。

JQuery 使用百分号对 URL 进行编码，而我的 PHP 没有考虑到这一点。我将失败的调用解释为 CORS 有问题；事实并非如此。

所以这个 url 实际上可以工作:

$url = "http://api.example.com/?q=stuff";

问题在于更复杂的 URL，包含空格和标点符号。这在直接访问时可以正常工作:

$url = "http://api.example.com/?q=more+stuff";

但是在使用JQuery的时候，决定将查询字符串变成:

more%sBstuff

...这让 PHP 感到困惑。在我的代码中更高，在我有这个之前:

$url = urlencode($request->get('q'));

现在我必须添加另一个 urldecode

$query = urlencode(urldecode($request->get('q')));

抱歉造成混淆。我希望这有朝一日能对互联网领域的某个人有所帮助。

关于从同一域上的另一个页面调用时，PHP 外部 API 访问失败？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40557161/