在 chrome 中检查代码时收到错误消息答案

【问题标题】：getting error message when inspecting code in chrome在 chrome 中检查代码时收到错误消息
【发布时间】：2020-09-28 15:23:21
【问题描述】：

我是编码新手，当我尝试使用开发人员工具在 chrome 中检查我的代码时，我不断收到此脚本错误？任何建议或帮助将不胜感激。

snakegame.html:1 从源“null”访问“file:///C:/Users/mverm/Desktop/HTML/HTML/Personal%20Projects/snake_game/snakegame.js”处的脚本已被阻止CORS 策略：跨源请求仅支持协议方案：http、data、chrome、chrome-extension、https。 snakegame.js:1 加载资源失败：net::ERR_FAILED

HTML

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Snake Game</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="snakegame.css">
    </head>
    <body>
        <div id="game-board"></div>
        <script src="snakegame.js" defer type="module"></script>
    </body>
</html>

CSS

body {
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    background-color: black;
}
#game-board {
    background-color: #ccc;
    width: 100vmin;
    height: 100vmin;
    display: grid;
    grid-template-rows: repeat(21, 1fr);
    grid-template-columns: repeat(21, 1fr);
}

.snake {
    background-color: hsl(200, 100%, 50%);
    border: .25vmin solid black;
}

.food {
    background-color: hsl(50, 100%, 50%);
    border: .25vmin solid black;
}

let lastRenderTime = 0;

function main(currentTime) {
    const secondsSinceLastRender = (currentTime - lastRenderTime) / 1000;
    window.requestAnimationFrame(main);
    lastRenderTime = currentTime;
    console.log(secondsSinceLastRender);
}
window.requestAnimationFrame(main);

【问题讨论】：

在服务器上运行。例如使用节点 http-server。npmjs.com/package/http-server
这能回答你的问题吗？ javascript modules and CORS
我不知道这个答案有多少相关性，但您似乎面临的问题来自未运行到服务器端。您可以简单地下载 vs 代码并下载将生成实时本地主机服务器的实时服务器，然后您可以使用该服务器运行该服务器

标签： javascript html css

【解决方案1】：

当您从文件系统（相对于 http 服务器）加载网页时，源设置为 null。 null origin 导致 cors 问题。

要解决此问题，请使用 Web 服务器，如果您安装了 python，则可以使用 SimpleHTTPServer 或 http.server。

按照此处的指南安装和运行 http 服务器：https://developer.mozilla.org/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server

运行后通过http://localhost:8000访问网页。

【讨论】：

【解决方案2】：

您将需要 CORS 来修复该错误。您可以下载 Chrome 扩展程序 - Here

我也可以建议您仅在调试时启用 CORS，并在不需要时将其关闭。

【讨论】：