如何提出一个简单的 CORS 请求？

Posted 2023-03-04

【中文标题】如何提出一个简单的 CORS 请求？

【英文标题】：How to make a simple CORS request?

【发布时间】：2015-09-13 03:30:53

【问题描述】：

情况：

我正在 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);

【问题讨论】：

服务器必须支持CORS头，否则浏览器会拒绝响应。如果实施，服务器将在响应中发送 CORS 标头。您在服务器中添加 CORS 标头是您希望从托管在与您的服务不同的主机中的客户端调用您的服务。

【参考方案1】：

一般情况下：您只需使用XMLHttpRequest 发出普通请求。浏览器将处理其余部分。 （例外情况是在不支持 CORS 或要求您使用 XDomainRequest 而不是 XMLHttpRequest 的旧浏览器中——但您似乎已经考虑到了这一点。

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

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

【讨论】：

添加到最后一条评论，设置Access-Control-Allow-Origin 不能在AngularJs 请求中完成。它必须在处理响应的服务器上完成。这意味着除非您拥有所请求的服务，否则 CORS 不是一个选项

感谢您的回复。您能否提供一个具有正确 Access-Control-Allow-Origin:* 设置的代码示例？

@johnnyfittizio — 请参阅答案最后一句中的代码示例。 （我无法告诉您如何配置您的服务器/服务器端代码以输出该标头，因为您甚至没有告诉我们您在那里使用的服务器/编程语言）

好的。我已经包含了简单的 api 测试。我必须在其中包含标题？

这看起来有点像 Java，但不知道如何在该代码中设置 HTTP 响应标头。这是一个可能的地方，但那里没有足够的信息让我告诉你如何设置它。