HTML Code -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/jsx"></script>
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script type="text/babel" src="./app.js"></script>
</body>
</html>
JavaScript Code -
const app = document.getElementById("app");
const page = (
<div>
<img src="./React-icon.png" alt="React Icon"/>
<h1>Fun facts about React</h1>
<ul>
<li>Was first released in 2013</li>
<li>Was originally created by Jordan Walke</li>
<li>Has well over 100k stars on GitHub</li>
<li>Is maintained by Facebook</li>
<li>Powers thousands of enterprise apps, including mobile apps</li>
</ul>
</div>
);
ReactDOM.render(page, app);
This renders a blank page and shows this error in the console - "Access to XMLHttpRequest at 'file:///C:/Users/praty/OneDrive/Desktop/Pratyush/Projects/NextJSDemo/test1/app.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, edge, https, chrome-untrusted.".
Also, another error - Failed to load resource: net::ERR_FAILED, though I think this one is just consequential to the first one.
Please help me resolve this error. Also if you have any advice reagrding the structure of the code or anything else, do share those too. This is my first day with react and I would love to have all the help! This is the image for the file structure of the project - https://i.stack.imgur.com/nu7zr.png