0

I am new to coding I keep getting this script error when I try to inspect my code in chrome using the developer tools? Any suggestions or help would be appreciated.

snakegame.html:1 Access to script at 'file:///C:/Users/mverm/Desktop/HTML/HTML/Personal%20Projects/snake_game/snakegame.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. snakegame.js:1 Failed to load resource: 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);
Manendar Verma
  • 47
  • 8
  • 1
    run on a server.use node http-server for example.https://www.npmjs.com/package/http-server – Madhawa Priyashantha Jun 09 '20 at 12:40
  • 1
    Does this answer your question? [javascript modules and CORS](https://stackoverflow.com/questions/50197495/javascript-modules-and-cors) – Madhawa Priyashantha Jun 09 '20 at 12:40
  • I dont know how much this answer is relevant but the issue you seems like facing is coming from not running into server side. You could simply download vs code and download live server that will generate live local host server and you could use that run the server – danny Jun 09 '20 at 12:54

2 Answers2

0

You will need CORS to fix that error. You can download Chrome extension - Here

As well I can suggest you to enable CORS only for debugging and turn it off when you don't need it.

As well you can take a look here for more information about it - No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API

Hexycode
  • 428
  • 8
  • 26
0

The origin is set to null when you are loading the webpage from the file system (versus an http server). The null origin causes the cors issue.

To fix this use a web server, if you have python installed you can use SimpleHTTPServer or http.server.

Follow the guide here to install and run the http server: https://developer.mozilla.org/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server

After running visit the webpage via http://localhost:8000 instead.

ibash
  • 1,477
  • 17
  • 31