0

Есть 3 файла:

  1. comment.html
  2. react.js
  3. 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')
);
4
  • crossorigin уберите у <script crossorigin src="/src/react.js"></script>, или тяните как все остальное c CDN 7 ноя 2020 в 17:38
  • Вам нужен локальный сервер, к примеру "live-server" npm пакет , и желательно webpack, если весь код не в одном файле.
    – Austral1a
    7 ноя 2020 в 17:42
  • Спасибо, я думал можно будет редактировать код не запуская сервер. 13 ноя 2020 в 19:00
  • Конечно нужен сервер у Вас сейчас схема протокола file а требуется http без сервера это не возможно организовать, просто внимательно читайте ошибку 29 июн 2022 в 17:50

1 ответ 1

0

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

1

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.