Bootstrap CDN не работает, когда я отлаживаю в Webstorm, я получаю ошибку политики CORS - PullRequest
Новая
       0

Bootstrap CDN не работает, когда я отлаживаю в Webstorm, я получаю ошибку политики CORS

0 голосов
/ 04 марта 2020

Я пытаюсь использовать bootstrap для стилизации своего проекта, но получаю сообщение об ошибке политики CORS. Мой сайт просто отображает HTML без стиля. При нажатии кнопки «Добавить в таблицу» модальное окно не открывается. Также не уверен, почему стиль загружается. 

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>Hello, world!</title>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col">
            <button type="button" class="btn btn-primary btn-lg btn-block" data-toggle="modal" data-target="#myModal">Add to Table</button>
        </div>

    </div>

    <table class="table">
        <thead>
        <tr>
            <th scope="col">Image</th>
            <th scope="col">Name</th>
            <th scope="col">Surname</th>
            <th scope="col">Edit</th>
            <th scope="col">Delete</th>
        </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>


<!-- The Modal -->

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">New message</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="recipient-name" class="col-form-label">Recipient:</label>
                        <input type="text" class="form-control" id="recipient-name">
                    </div>
                    <div class="form-group">
                        <label for="message-text" class="col-form-label">Message:</label>
                        <textarea class="form-control" id="message-text"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Send message</button>
            </div>
        </div>
    </div>
</div>


<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
</body>
</html>

Вот ошибка.

Доступ к CSS таблице стилей в 'https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css' from origin ' http://localhost: 63341 'заблокировано политикой CORS: Ответ на предпечатный запрос не проходит проверку контроля доступа: не имеет HTTP-статуса ok. index. html: 7GET https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css net :: ERR_FAILED

Есть идеи, как это исправить?

Спасибо

1 Ответ

0 голосов
/ 04 марта 2020

Я тоже новичок, пока не могу комментировать, поэтому отвечаю вместо этого. Я не уверен, что это решение, но, может быть, вы можете использовать другой URL CDN? Попробуйте и дайте мне знать, пожалуйста. =) Может быть, даже загрузка bootstrap (и jquery) и ссылка на ТО может решить эту проблему.

Редактировать 1, проблема найдена. Для работы модалов необходим плагин bootstrap javascript. добавьте следующий код ниже вашего jquery сценария. 

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

Edit 2: Fwlt, как я должен объяснить немного больше, вы правильно использовали CDN, и именно поэтому стили bootstrap работают, но модал, который вы хотели использовать, требовал использования плагина bootstrap; s JAVASCRIPT, который я поручил вам добавить. Конечно, для того, чтобы использовать плагин bootstrap JS, вам нужно также связать его с Jquery, ПОТОМ можно связать с bootstrap js. если вы планируете также ссылаться на popper. js, который советует вам сделать для большей власти над позиционированием, все еще используя классы bootstrap, вы должны добавить его между плагином jquery и bootstrap. и я также хотел бы сообщить вам, что если вы планируете добавить файл css для добавления собственных стилей, добавьте его после bootstrap cdn в заголовке документа.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...