如何修复此错误以及如何正确编写我的 github 用户名？它是带美元符号还是不带美元符号？

如何解决如何修复此错误以及如何正确编写我的 github 用户名？它是带美元符号还是不带美元符号？

我从浏览器得到的错误是这样的：

未捕获的 DOMException：无法在“XMLHttpRequest”上执行“setRequestHeader”：对象的状态必须为 OPENED。

我把图片放在我的github和json文件中。我正在从我的工作站执行 html 文件。我应该将 html 文件推送到 github 并从那里执行吗？

这是我推送到 Github 的 Json 文件。

{
    "events" : [
        { "location" : "San Francisco,CA","date" : "May 1","img" :"pic1.jpg"},{ "location" : "Austin,TX","date" : "May 15","img" :"pic2.jpg"},{ "location" : "New York,NY","date" : "May 30","img" :"pic3.jpg"}
    ]
}

这是我的 HTML 文件：

<!DOCTYPE html>
<html>

<body>
    <h2>User Account Example</h2>

    <script>
        var xhr = new XMLHttpRequest();
        xhr.setRequestHeader("Content-Type","application/json");
        xhr.setRequestHeader("Access-Control-Allow-Origin","*");
        xhr.open("GET",'https://github.com/${username}/JSON/myjson.json',true);
        xhr.send(null);

        xhr.onload = function () {
            console.log("xhr.status: " + xhr.status);
            if (xhr.status === 200) {
                console.log("Pineapple Juice");
                responSEObj = JSON.parse(xhr.responseText);
                var newContent = '';
                var i;
                for (i = 0; i < responSEObj.events.length; i++) {
                    newContent += '<div class="event">';
                    newContent += '<img src="' + responSEObj[i].img + '"';
                    newContent += 'alt="' + responSEObj[i].location + '" />';
                    newContent += '<p><b>' + responSEObj[i].location + '</b><br>';
                    newContent += responSEObj.events[i].date + '</p>';
                    newContent += '</div>';
                }
                document.getElementById("myuser").innerHTML = newContent;
            }
        };
    </script>
    <div id="myuser"></div>
</body>

</html>

解决方法

顺序不对。而 Access-Control-Allow-Origin 是一个响应头，这不适用于请求。此外，GET 请求不能有正文，因此您不需要内容类型标头。

var xhr = new XMLHttpRequest();

xhr.onload = function () {
    console.log("xhr.status: " + xhr.status);
    if (xhr.status === 200) {
        console.log("Pineapple Juice");
        responseObj = JSON.parse(xhr.responseText);
        var newContent = '';
        var i;
        for (i = 0; i < responseObj.events.length; i++) {
            newContent += '<div class="event">';
            newContent += '<img src="' + responseObj[i].img + '"';
            newContent += 'alt="' + responseObj[i].location + '" />';
            newContent += '<p><b>' + responseObj[i].location + '</b><br>';
            newContent += responseObj.events[i].date + '</p>';
            newContent += '</div>';
        }
        document.getElementById("myuser").innerHTML = newContent;
    }
};

xhr.open("GET",`https://github.com/${username}/JSON/myjson.json`,true);

// here can you set request headers
xhr.setRequestHeader("Accept","application/json");

xhr.send(null);