Ajax Cross origin requests are only supported for protocol schemes

JavaScript
1

This simple piece of code is not working, what should I do now

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Ajax Tutorials</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
    <script>
        $(document).ready(function(){
            $('#btn').click(function(){
                $('#test').load("data.txt", {
                    Name: "Vijesh",
                    Lastname: "Arora",
                }, function(){
                    alert("Hi idiot!");
                });
                });
            });
       
    </script>
</head>
<body>

    <div id="test"><p>This is the first content!</p></div>
    <button id="btn">Click to change</button>
        
</body>
</html>

I have created the data.txt file in the same directory where this index.html is placed.

ERROR
XMLHttpRequest cannot load file:///Applications/XAMPP/xamppfiles/htdocs/php/ajax/data.txt. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

2

You need to run a local web server to use AJAX. You can’t do it by simply opening an HTML file in your browser.

If you’re on Windows, the easiest way is to use a packaged solution like XAMPP.

If you’re a little more tech savvy, then running you could install NGINX and just have it pointed at your projects directory. It uses <1mb of RAM and virtually no processor while idle.

3

Or to rephrase, you are not allowed to use “file:///” for cross-origin requests. It has to be “http://” or similar.

1 Like
4

Well to be fair, his code isn’t using either. :stuck_out_tongue_closed_eyes:

5

Doesn’t the browser use the same file:/// reference as that of which the HTML file was loaded?

$('#test').load("data.txt", {
6

Oh right, I see what you’re saying. Good point.

7

I am still using XAMPP server but no doubt this error was still appears.

8

You have to actually open that page from your localhost then, not from the file system. So if it’s in /Applications/XAMPP/xamppfiles/htdocs/php/ajax/ and XAMPP is running, the address would be something like http://127.0.0.1:8000/php/ajax/index.html (adjust the :port and name of the .html file).

1 Like
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.