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

Question

我是编码新手，当我尝试使用开发人员工具在 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;
}

JS

let lastRenderTime = 0;

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

Answer 1

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

同样，我建议您仅启用 CORS 进行调试，并在不需要时将其关闭。

您也可以在此处查看有关它的更多信息 - 尝试从 REST ZDB974238714CA8DE634A7CE1D8 获取数据时，请求的资源上不存在“Access-Control-Allow-Origin”header

Answer 2

当您从文件系统加载网页时（相对于 http 服务器），源设置为 null。 null 原点导致 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访问网页。

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

问题描述

2 个解决方案

解决方案1
0 2020-06-09 13:20:38

解决方案2
0 2020-06-09 16:59:27

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

问题描述

2 个解决方案

解决方案1 0 2020-06-09 13:20:38

解决方案2 0 2020-06-09 16:59:27

解决方案1
0 2020-06-09 13:20:38

解决方案2
0 2020-06-09 16:59:27