Bootstrap CDN 不起作用，当我在 Webstorm 中调试时出现 CORS 策略错误答案

【问题标题】：Bootstrap CDN doesn't work, when I debug in Webstorm I get a CORS policy errorBootstrap CDN 不起作用，当我在 Webstorm 中调试时出现 CORS 策略错误
【发布时间】：2020-06-17 04:35:40
【问题描述】：

我正在尝试使用引导程序为我的项目设置样式，但我不断收到 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>

这是错误。

从源“http://localhost:63341”访问“https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css”处的 CSS 样式表已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：它没有 HTTP ok 状态。 index.html:7GET https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css net::ERR_FAILED

关于如何解决这个问题的任何想法？

谢谢

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

我也是新人，我还不能评论，所以我正在回复。我不确定这是一个解决方案，但也许您可以使用不同的 CDN URL？试试吧，请让我知道 =) 也许甚至下载引导程序（和 jquery）并链接到 THAT 可以解决它。

编辑 1，发现问题。 modals 需要 bootstrap 的 javascript 插件才能工作。在您的 jquery 脚本下方添加以下代码。

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

编辑 2：Fwlt 就像我应该解释的那样，您已经正确使用了 CDN，这就是引导样式起作用的原因，但是您想要使用的模式需要使用引导程序；我指示您的 JAVASCRIPT 插件添加。当然，为了使用bootstrap JS插件，你还需要链接到Jquery，然后你可以链接到bootstrap js。如果您还计划链接到 popper.js，它建议您做更多的定位功能，仍然使用引导程序类，您必须在 jquery 和引导程序的插件之间添加它。我还想告诉你，如果你打算添加一个 css 文件来添加你自己的样式，请将其添加到文档头部的 bootstrap cdn 之后。

【讨论】：

我尝试了不同的 CDN，使用了 stackpath 和 maxCDN，但没有运气。我还安装了 bootstrap 4.4.1 和 JQuery
Hey xXnikosXx 原来我只有 JQuery CDN 而不是 JS CDN，因为某种原因导致了这个问题。不太清楚为什么，但现在有效。非常感谢，谢谢?
当你添加jquery cdn时，你可以正常使用jquery，但是要创建预先制作的引导项并自定义它们，就像你想对模态做的那样，你还必须添加引导插件如上所述，因为它内部有代码来创建您想要使用的操作，例如当您按下按钮时弹出模式。通常使用 bootstrap 的人也只需添加所有插件（jquery、popperjs 和 bootstrapjs）。它不会减慢网站的速度，因为 cdn 考虑到这一点。 han=ve 美好的一天。
我是愚蠢的??‍♂️。我什至在引导网站上读到 Modals 也需要 javascript CDN。谢谢兄弟