Возникает ошибка cors в локальном файле html

327

12 апреля 2022, 18:00

есть 3 файла comment.html, react.js, style.comment.css Ошибка: Access to script at 'file:///D:/src/react.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https. comment.html:12 GET file:///D:/src/react.js net::ERR_FAILED

Подскажите пожалуйста заранее спасибо comment.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no">
        <title>Eagle Eye & Co/Re</title>
        <link rel="stylesheet" type="text/css" href="style.comment.css">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
        <link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Josefin+Slab:400,600,700" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Sacramento" rel="stylesheet">
    </head>
<body class="container-fluid">
<!-- ==========IT`S My Header Site Block=========-->
    <header class="parallax-title">
        <p class="site-title"><a class="site-title effect-shine" href="" rel="home" style="text-decoration: none; color: #F7DCD6;">Блог инвестора</a></p>
        <font size="6">
            <div class="child"><a style="text-decoration: none; color: #D2D082;" href="" rel="home">Главная</a></div>
            <div class="child"><a style="text-decoration: none; color: #D2D082;" href="" rel="gallery">Галерея</a></div>
            <div class="child"><a style="text-decoration: none; color: #D2D082;" href="" rel="learn">Обучение</a></div>
            <div class="child"><a style="text-decoration: none; color: #D2D082;" href="" rel="chat">Блог</a></div>
            <div class="child"><a style="text-decoration: none; color: #D2D082;" href="" rel="motiv">Мотивация</a></div>
        </font>
    </header>
    <main>
        <div id="root"></div>
    </main>
    <footer class="card-footer">
        <div>
            <a style="text-decoration: none;" href="">
                <p>Поддержка</p></a>
                -
            <a style="text-decoration: none;" href="">
                <p>Рекомендации</p></a>
                -
            <a style="text-decoration: none;" href="">
                <p>Настройки</p></a>
                - 
            <a style="text-decoration: none;" href="">
                <p>Главная</p></a>
                -
            <a style="text-decoration: none;" href="">
                <p>Галерея</p></a>
                -
            <a style="text-decoration: none;" href="">
                <p>Обучение</p></a>
                -
            <a style="text-decoration: none;" href="">
                <p>Чат</p></a>
                -
            <a style="text-decoration: none;" href="">
                <p>Мотивация</p></a>
        </div>
    </footer>
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js" crossorigin></script>
    <script crossorigin src="/src/react.js"></script>
    </body>
</html>

react.js


    const name = 'Admiral-General';
    const element = <h1>Hello, {name}</h1>
    ReactDOM.render(
      element,
      document.getElementById('root')
    );

Answer 1

Проблема в том что нужен локальный сервер Node.js для компонентов react в отдельном файле, но можно в прописать