Issue
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
Solution
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.
Answered By - xXnikosXx
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.