Click here to Skip to main content
14,981,532 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
hi
i use notepad to practice HTML and JQuery And Json
my HTML
HTML
<pre><!DOCTYPE html>
<html lang="en">

<head>
    <title>گالری سگ ها</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/style.css" rel="stylesheet">

</head>

<body>
    <div id="menu">
        <button href="json.json">json</button>

    </div>
    <div id="frame">

    </div>

    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
</body>

</html>



my css:
CSS
* {
    font-family: 'Times New Roman', Times, serif;
    font-size: 100%;
    margin: 0;
    padding: 0;
    font-weight: normal;
    font-style: normal;
    box-sizing: border-box;
}

.clear:after {
    clear: both;
    display: table;
    content: "";
}

.clear {
    zoom: 1;
}

ul,
ol,
li {
    list-style: none;
    display: block;
}

div {
    display: block;
    margin: 0px;
    padding: 0px;
}

a {
    display: block;
    text-decoration: none;
}

body {
    background-color: #fff;
}

#menu {
    width: 75%;
    margin: auto;
    background-color: yellow;
}

#menu button {
    border: 2px solid blue;
    color: white;
    background-color: blue;
    margin: 3px;
    padding: 8px;
}

#frame {
    width: 75%;
    height: 700px;
    border: 1px solid black;
    margin: auto;
}

my json file is in same directory of Html file :
HTML
{
    "employees": [
        { "firstName": "John", "lastName": "Doe" },
        { "firstName": "Anna", "lastName": "Smith" },
        { "firstName": "Peter", "lastName": "Jones" }
    ]
}


and my Jquer Code:
JavaScript
$(Document).ready(function() {

    $('#menu button').click(function() {
        var linked = $(this);
        var textlinked = linked.attr('href');

        $.ajax({
            url: textlinked,
            success: function() {
                alert();
            }
        });

        return false;
    });

});


when i run my index file i Get error :
jquery-3.2.1.min.js:4 XMLHttpRequest cannot load file:///C:/Users/PC-01/Desktop/vs%20code/HtmlCSS/json.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.




How Can i solved this error

What I have tried:

i don't know what can i do for this problem
Posted
Updated 2-Jul-20 21:49pm
Comments
F-ES Sitecore 6-Jul-17 5:54am
   
You'll need to create a website in IIS and host your files there and access it via http such as

http://localhost/mysite

Firefox[^] will allow you to make AXAJ requests using the file: protocol if the page was loaded using the file: protocol.

Chrome, however, blocks this by default. To enable it, you need to launch Chrome from a command prompt, specifying the --allow-file-access-from-files flag.

javascript - AJAX request to local file system not working in Chrome? - Stack Overflow[^]
How to set the allow-file-access-from-files flag option in Google Chrome for Windows[^]

NB: You should only enable this when you're testing your own code. Once you're finished, close Chrome and restart it without the flag.
   
Comments
Member 14940365 17-Sep-20 0:50am
   
Does this need to be updated: it didn't work for me.
Richard Deeming 17-Sep-20 5:28am
   
Looks like Firefox has treated all file: URLs as unique origins since v68:
1500453 - Treating file: URIs as unique origins[^]

It looks like Chrome may have disabled the command-line flag in v72:
How to access local files using Chrome 72? - Google Chrome Community[^]
Even I had the same problem. I used the command (in Ubuntu)
$browser-sync start --server --directory --files "**/*"
(after installing browser sync) and it solved the issue. Make sure to run this command from the directory in which all your code files are located.
"For security reasons, browsers restrict cross-origin HTTP requests initiated from scripts." -Google search
   
Host it in Web server[^] and try.
   
<!DOCTYPE html>
<html>
<body>

<h2>The XMLHttpRequest Object</h2>

<p id="demo">Let AJAX change this text.</p>

<button type="button" onclick="loadDoc()">Change Content</button>

<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "https://www.w3schools.com/js/ajax_info.txt", true);
  xhttp.send();
}
</script>

</body>
</html>


i Can't run this code on chrome ; \
Error :
xml.html:27 Access to XMLHttpRequest at 'file:///C:/Users/1819092/Desktop/MANAS/ajax_info.txt' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
   
Comments
CHill60 5-Mar-20 7:25am
   
If you have a question then use the red "Ask a Question" link at the top of the page. You should not post questions or comments as solutions to other members questions. There is nowhere for us to answer

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900