The identical web address functions as a point of reference for design, however it does not function as an AJAX request

Question

The identical web address functions as a point of reference for design, however it does not function as an AJAX request

This piece of code is functioning properly:


      {html}
      {head>
           {**link rel="stylesheet" href="http://localhost:3000/CSS/mystyle.css"**}
      {/head}
      {body}
      {/body}
      {/html}

However, when I use the same URL in this code, it presents an issue: XMLHttpRequest cannot load "href="http://localhost:3000/CSS/mystyle.css". Origin null is not allowed by Access-Control-Allow-Origin.


        $(document).ready(function() {

               var href = 'http://localhost:3000/CSS/mystyle.css';

               $.ajax({
                   url: href,
                  dataType: 'text/css',
                   success: function(data) {
                       $('\n' + data + '').appendTo("head");
                   }
               });
           });

I am truly unsure about what the problem could be, as both are making a similar XMLHttpRequest call. Any help would be greatly appreciated. Thank you.

css ajax load

Answer 1

Answer №1

To easily resolve this issue, consider utilizing a local web server such as WAMP (or IIS) if you haven't already.

Another solution is that Chrome and Safari impose restrictions on using ajax with local resources, resulting in an error message like:

"Origin null is not allowed by Access-Control-Allow-Origin."

Solution: Opt for Firefox or upload your data to a temporary server. If you prefer to continue using Chrome, start it with the following option;

--allow-file-access-from-files

For additional information on adding the above parameter to Chrome: Right click on the Chrome icon in your taskbar, then right click on Google Chrome in the pop-up window and select properties. Add the aforementioned parameter inside the Target textbox under the Shortcut tab. Your command will look similar to the following;

C:\Users\XXX_USER\AppData\Local\Google\Chrome\Application\chrome.exe --allow-file-access-from-files

Answer 2

To easily resolve this issue, consider utilizing a local web server such as WAMP (or IIS) if you haven't already.

Another solution is that Chrome and Safari impose restrictions on using ajax with local resources, resulting in an error message like:

"Origin null is not allowed by Access-Control-Allow-Origin."

Solution: Opt for Firefox or upload your data to a temporary server. If you prefer to continue using Chrome, start it with the following option;

--allow-file-access-from-files

For additional information on adding the above parameter to Chrome: Right click on the Chrome icon in your taskbar, then right click on Google Chrome in the pop-up window and select properties. Add the aforementioned parameter inside the Target textbox under the Shortcut tab. Your command will look similar to the following;

C:\Users\XXX_USER\AppData\Local\Google\Chrome\Application\chrome.exe --allow-file-access-from-files

The identical web address functions as a point of reference for design, however it does not function as an AJAX request

Answer №1

Similar questions

To extract data from a website using a dynamic dropdown menu that alters the website in real-time when an option

Upon loading, the Carousel is visible instead of being hidden, which is contrary to its intended behavior

Alignment issue: Center alignment failing to work correctly

Submitting the form without utilizing Ajax, but instead sending data directly to a PHP script

Tips for animating a div twice within the success function

Display the header of the table after a page break in HTML using CSS

Switch up the Thumbnail Image based on the selected category

The AJAX request returned a 404 error, indicating that the requested resource could

After receiving a response from the .ajax function, the message will be added to the specified

Attempting to adjust table size in MPDF to fill the available height

Creating a search bar with a basic text input and submit button using Flask

"Guide to triggering the display of a particular div based on its class when clicked

Using ext.js to make asynchronous AJAX requests

What is the best way to extract data from the ajax.done() function?

Ensure that only the most recent Ajax request is allowed

Problematic: BS4 Cards cannot be accommodated within the parent div.Improved: The

What is the best way to center the image on a page?

Conceal the standard style class of the p:selectOneRadio element

Having difficulty retrieving the specific Laravel validation error message through AJAX

Ways to ensure a for loop waits until an Async call is successful before proceeding