You can solve it by going in your Settings -> Build. Execution, Deployment -> Debugger and set Allow using requests on true
Solution 1 :
Solution 2 :
I’m also new, I cant comment yet so I am replying instead. I’m not sure it’s a solution, but maybe you can use a different CDN URL? Try it and let me know pls =) Maybe even downloading bootstrap (and jquery) and linking to THAT could solve it.
Edit 1, issue found. modals need bootstrap’s javascript plugin to work. add the following code below your jquery script.
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
Edit 2: Fwlt like i should explain a bit more, you have used the CDN correctly, and thats why the bootstrap styles work, but the modal you wanted to use required the use of bootstrap;s JAVASCRIPT plugin which i instructed you to add. Ofcourse it order to use the bootstrap JS plugin you need to also link to Jquery, THEN you can link to the bootstrap js. if you plan on also linking to popper.js, which id advise you to do for more power over positioning, still using bootstrap classes, you have to add it between jquery and bootstrap’s plugin. and i’d also like to let you know, if you plan on adding a css file to add your own styles, add it after the bootstrap cdn in the head of your document.
Problem :
I’m trying to use bootstrap to style my project, but I keep getting a CORS Policy Error.My site just displays the stock HTML with no style. Clicking the “Add to table” button does not open the modal. Also not sure why the style loads.
<!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">×</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>Here is the error.
Access to CSS stylesheet at ‘https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css‘ from origin ‘http://localhost:63341‘ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: It does not have HTTP ok status.
index.html:7GET https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css net::ERR_FAILED
Any ideas on how to fix this?
Thanks
Comments
Comment posted by Besworks
This does not answer the original question. Whatever process you have followed is highly specific to your development environment and not applicable here.
Comment posted by Hans Peter
@Besworks thanks but he wrote in his title Webstorm. This is a solution for webstorm
Comment posted by Nihilus.JS
I’ve tried different CDN’s, used the stackpath and maxCDN ones and no luck. I also have bootstrap 4.4.1 installed and JQuery
Comment posted by Nihilus.JS
Hey xXnikosXx So turns out I only had the JQuery CDN and not the JS one as well, for some reason that was causing the issue. Not too sure why but works now. Much appreciated, Thank you
Comment posted by xXnikosXx
When you add the jquery cdn, you can normally use jquery, but to create pre-made bootstrap items and customise them, like you wanted to do with the modal, you have to also add the bootstrap plugin as instructed above, since it has the code inside to create the actions you wanted to use, like making the modal pop-up when you press a button. usually people that use bootstrap just add all the plugins too (jquery, popperjs and bootstrapjs). it doesnt slow down a website since the cdns work with that in mind. han=ve a great day.
Comment posted by Nihilus.JS
I was being stupid ♂️. I was even reading on the bootstrap website that Modals require the javascript CDN as well. Thanks Bro