Question

情况：

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

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

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

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

$ HTTP CALL：

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

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

CORS REQUEST - 代码：

// 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: *（或更具体的内容）到跨源请求。

如何制作一个简单的CORS请求？

1 个答案: