I'm having trouble getting Bootstrap CDN to work, as I keep encountering a CORS policy error when I debug in Webstorm

I'm encountering a CORS Policy Error while attempting to implement Bootstrap for my project. The site is only showing plain HTML without any styling, and clicking the "Add to table" button does not trigger the modal window. I am also unsure why the style isn't being applied.

<!doctype html>
<html lang="en>
...
            </button>
        </div>

    </div>

Below is the error message:

Access to CSS stylesheet at '' 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 net::ERR_FAILED

Any suggestions on resolving this issue?

Appreciate your help!

htmlcssbootstrap-4

Answer №1

To resolve this issue, navigate to your Settings -> Build, Execution, Deployment -> Debugger and adjust the setting to Allow using requests to true

Answer №2

Being new myself, I can't comment yet so I'm replying instead. Perhaps trying a different CDN URL could help, although I'm not certain if it's the solution. Give it a shot and let me know, please =) You could even consider downloading Bootstrap (and jQuery), then linking to THAT to see if it resolves the issue.

An update: I've identified an issue. Modals require Bootstrap's JavaScript plugin to function properly. To address this, simply 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>

Another note: It seems that you have correctly utilized the CDN for Bootstrap styles to work. However, for the modal functionality you desire, Bootstrap's JavaScript plugin is necessary, as previously mentioned. In order to utilize the Bootstrap JS plugin, remember to first link to jQuery before including the bootstrap js file. If you decide to also include popper.js for additional control over positioning while using Bootstrap classes, make sure to place it between jQuery and Bootstrap's plugin. Additionally, if you intend to add a custom CSS file for your own styles, ensure to do so after including the Bootstrap CDN in the head section of your document.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guidance on Handling ClassNotFoundException in App Engine Blobstore Lesson

I've been following a tutorial at https://developers.google.com/appengine/docs/java/blobstore/#Uploading_a_Blob However, I keep encountering this persistent issue: Error: Server Error The server faced an error and was unable to fulfill the re ...

javahtmlgoogle-app-engineservlets

Tips for transferring an array between pug mixins?

My pug template features an array that I want to transfer to a mixin in order to populate JSON schema.org markup. Below is the code: profile.pug include ../components/bio-seo - var person = {} - person.title = "Name, title of person" - person.url = "ht ...

htmlarrayspuginterpolation

Tips for implementing events with AngularJS Bootstrap Colorpicker

I am having trouble understanding how events function with Angular Bootstrap Colorpicker. I have forked a Plunker from the developer's example. Unfortunately, there are no examples provided for using events. It would be great if events like colorpick ...

javascripthtmlangularjscolor-picker

Continuous loop of rotating background images

I've created a design with an image in the background using the following CSS: body { width: 1000px; margin: 0 auto; background: url('/images/bg.jpg') top center no-repeat; background-attachment: scroll; } The image is 2000px in wi ...

jqueryhtmlcss

Are there any current implementations of the Media Capture API in use?

After delving into the details of the draft Device APIs, I am curious if there are any existing implementations of the Media Capture API. Ericsson has showcased a few demos but hasn't made the source code available yet. There is also a reported bug o ...

javascripthtmlw3c

What is the reason the text does not have a border around it?

The border is supposed to be around the text, but it isn't showing up. Where did I go wrong? Could it be that I need to set a position? html { width: 100%; height: 100%; margin: 0; padding: 0; } body { width: 100%; height: 100%; marg ...

htmlcss

Displaying information from a database in HTML dropdown menus and tables

Recently, I started learning PHP and I am facing a challenge with my database that has 5 columns: "id", "fldName", "fldPrice", "fldSupplier", and "fldPackage". In my HTML table, I have select options where I display "fldName" based on a specific value of ...

phphtmlmysql

Creating a unique custom theme for Twitter Bootstrap at 1200px and 980px screen sizes

Using the Twitter Bootstrap CSS framework, I have successfully created a custom navigation bar for desktop devices with a width of 1200 pixels and above. Now, I want to create similar navigation bars for other screen widths such as 980px, tablets, and phon ...

htmlcsstwitter-bootstrapresponsive-design

Understanding the Relationship Between CSS Width and Overlapping Elements

Is there a way to make my suggestion div inherit the width of the input field while overlapping the other elements? My current CSS code achieves the overlap effect, but fails to inherit the width of the input field accurately. I have attempted setting the ...

htmlcsswidthoverlapinput-field

Retrieve outcome from successful AJAX post and update HTML using globalEval

I have a function in JQuery that asynchronously posts data function post_data_async_globalEval(post_url, post_data, globaleval) { $.ajax({ type: 'POST', url: post_url, data: post_data, dataType: 'html', async: true, ...

javascriptjqueryhtmlajax

Error: The function getSelectedOption is not defined when trying to call it on the onclick event of an HTMLButtonElement retrieved

As a complete novice in the world of javascript and html, I've decided to dive into building a webapp as an experiment. After running npm install http-server -g and http-server '' -o, a browser tab opened up. However, upon checking the conso ...

javascripthtmljqueryajax

Non-sibling grandchildren using Flexbox

Check out this example to see what I'm aiming for. I am looking to achieve a DOM structure as follows: <div class="parent"> <div class="child"> <div class="grandchild flex-3"> Wide Grandchild </div> <di ...

htmlcssflexbox

Tips for maximizing the height of the "container"

Below is the code snippet that I am working with. I am trying to increase the height of the "container" class, but I have been unsuccessful in finding a solution on Google. Can someone please review my code and provide guidance on how to achieve this? < ...

cssbootstrap-5

Arranging arrays in a MySQL gallery using PHP for optimal sorting

I've been attempting to organize my images from the database in a grid list format like this: ... I'm feeling stuck and unsure of what changes to make in my code. I really need some assistance, as I'm working on setting up an online store. ...

phphtmlmysqlcssweb

Practical applications of flexible layouts in everyday life

I'm currently on the hunt for real-world examples of elastic layouts, specifically those based on using em's for widths. Surprisingly, I haven't been able to find much out there. If anyone knows of any examples, I would greatly appreciate it ...

htmlresponsive-designelasticlayout

Creating a box that is connected by lines using JSON data requires several steps. You

I am attempting to dynamically draw a line using the provided JSON data. I have heard that this can be easily achieved with flexbox. Important: I would greatly appreciate a solution involving flexbox This is what I hope to achieve: https://i.stack.imgu ...

javascriptjqueryhtmlcss

Creating a collapsible sidebar feature in Angular 2

Currently in the process of converting an HTML jQuery AdminLTE dashboard to Angular 2 In the past, I would hide and show the sidebar using toggle() in jQuery. Now I'm wondering how to achieve the same functionality in Angular 2. I am utilizing the ...

javascripthtmlangulartypescript

The image fails to display when the Image tag in next.js is used

I have a picture in the public/img folder. I am trying to display it using the built-in <Image/> tag in next.js. This is the code I've written: <Image onClick={hideModal} alt="close_button" ...

javascripthtmlreactjsimagenext.js

css - design your layout with floating div elements

I used to design layouts using tables, but now I'm trying it out with divs. However, I'm still struggling to get the layout right. It's not as straightforward as using tables. For instance, my code looks like this: var html_output = "< ...

jquerycsshtml

Achieving right-aligned buttons in Bootstrap

Is there a way to align a button to the left inside a div that has the class justify-content-center applied? Here is the code I tried: <div class="card-header justify-content-center"> <div> <div class="ml-5"> Text i ...

cssangularjsbootstrap-4