时间戳

首页 > 解决方案 > 跨域xml获取请求失败

javascript - 跨域xml获取请求失败

问题描述

我试图帮助一个朋友完成一个程序，但我的编码经验有些过时（10 年的付出或接受）。试图通过他们的 API 从数据库中提取数据的地方。我通过 XMLhttpRequest 发出此请求，但我什至在访问服务器时遇到问题。

发生的错误：

Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost/jasper/api.shiftbase.com/api/rosters?min_date=2020-07-13&max_date=2020-12-31&department_id=24477

它试图在我自己的域上搜索 url。但我需要它来搜索跨域。

整个功能：

function getRequest(){
    var _request = new XMLHttpRequest();
    var key = myKeyHere;
    var url = "api.shiftbase.com/api/rosters?min_date=2020-07-13&max_date=2020-12-31&department_id=24477";
    _request.onreadystatechange = function(event){
    console.log(_request.readyState + " + " + _request.status);
        if (_request.readyState == 4){
            if ((_request.status >= 200 && _request.status < 300) || _request.status == 304){
                alert(_request.responseText);
            } else {
                    alert('Request was unsucceful: ' + _request.status);
            }
        }
    };
    _request.open("get", url, true);
    _request.setRequestHeader("Accept", "application/JSON", false);
    _request.setRequestHeader("Content-Type", "application/JSON", false);
    _request.setRequestHeader("Authorization", key, false);
    _request.send(null);
};

我还阅读了很多关于 CORS 以及它如何影响这些跨域请求的内容，但我不太了解它是如何工作的以及如何围绕它工作。

任何帮助表示赞赏。

标签： javascriptcors

解决方案

首先，您需要在 URL 前加上https://. 这样您就可以向外部服务器而不是 localhost 发出请求。第二件事是在你的标题中application/JSON应该是application/json.

另外不要忘记您的密钥需要以“API”为前缀。例子API [some_random_key]

我已经测试了以下代码并且它有效。您只需添加自己的 API KEY。

function getRequest(){
    var _request = new XMLHttpRequest();
    var key = "API [replace_this_with_your_key]"; // Example: "API a1b2c3d4e5f6g7h8i9"
    var url = "https://api.shiftbase.com/api/rosters?min_date=2020-07-13&max_date=2020-12-31&department_id=24477";
    _request.onreadystatechange = function(event){
    console.log(_request.readyState + " + " + _request.status);
        if (_request.readyState == 4){
            if ((_request.status >= 200 && _request.status < 300) || _request.status == 304){
                alert(_request.responseText);
            } else {
                    alert('Request was unsucceful: ' + _request.status);
            }
        }
    };
    _request.open("get", url, true);
    _request.setRequestHeader("Accept", "application/json", false);
    _request.setRequestHeader("Content-Type", "application/json", false);
    _request.setRequestHeader("Authorization", key, false);
    _request.send(null);
};

推荐阅读