javascript - 如何发起一个简单的 CORS 请求？

Question

情况:

我正在使用 AngularJs 制作应用程序。我需要发出 CORS 请求以从不同地址上的 api 获取数据。

在 api 上我输出一个非常简单的 json，用于测试目的:

[{"id":0,"name":"First"},{"id":1,"name":"Second"},{"id":2,"name":"Third"}]

我需要获取这些数据并显示在我的应用中。

$HTTP 调用:

进行 $http 调用时出现以下错误，因为 api 位于不同的域中:

No 'Access-Control-Allow-Origin' header is present on the requested resource

CORS 请求 - 代码:

// Create the XHR object.
$scope.createCORSRequest = function(method, url)
{
    var xhr = new XMLHttpRequest();

    if ("withCredentials" in xhr) 
    {
        // XHR for Chrome/Firefox/Opera/Safari.
        xhr.open(method, url, true);
    } 
    else if (typeof XDomainRequest != "undefined") 
    {
        // XDomainRequest for IE.
        xhr = new XDomainRequest();
        xhr.open(method, url);
    } 
    else 
    {
        // CORS not supported.
        xhr = null;
    }

    return xhr;
}


// Helper method to parse the title tag from the response.
$scope.getTitle = function(text)
{
    return text.match('<title>(.*)?</title>')[1];
}


// Make the actual CORS request.
$scope.makeCorsRequest = function()
{
    var url = 'http://DOMAIN.COM/main/json_export_test';

    var xhr = $scope.createCORSRequest('GET', url);

    console.log('----- xhr -----');
    console.log(xhr);

    if (!xhr) 
    {
        alert('CORS not supported');
        return;
    }

    // Response handlers.
    xhr.onload = function() 
    {
        var text = xhr.responseText;
        var title = $scope.getTitle(text);
        alert('Response from CORS request to ' + url + ': ' + title);
    };

    xhr.onerror = function() 
    {
        alert('Woops, there was an error making the request.');
    };

    xhr.send();
}

当我运行函数 makeCorsRequest 时，我收到 xhr.onerror 调用的警报

但我不知道为什么它不起作用。

API:

这是 api 中非常简单的 php 函数，用于测试目的:

public function json_export_test()
{
    $data = array(
        array(
            "id" => 0,
            "name" => "First"
        ),
        array(
            "id" => 1,
            "name" => "Second"
        ),
        array(
            "id" => 2,
            "name" => "Third"
        )
    );

    echo json_encode($data);
}

问题:

如何发出简单的 CORS 请求？

编辑 - 解决方案:

修改后的api是这样的，感谢回复:

public function json_export_test()
{
    header('Access-Control-Allow-Origin: *');

    $data = array(
        array(
            "id" => 0,
            "name" => "First"
        ),
        array(
            "id" => 1,
            "name" => "Second"
        ),
        array(
            "id" => 2,
            "name" => "Third"
        )
    );

    echo json_encode($data);
}

Answer 1

一般来说:您只需使用 XMLHttpRequest 发出一个普通请求。浏览器将处理其余部分。 (不支持 CORS 或要求您使用 XDomainRequest 而不是 XMLHttpRequest 的旧浏览器除外——但您似乎已经考虑到了这一点)。

您收到的错误消息表明您没有收到 CORS 响应，因此浏览器无权将其他网站的数据提供给您的 JavaScript。

您需要在对跨源请求的 HTTP 响应 中包含 Access-Control-Allow-Origin: *(或更具体的内容)。