0

I have two files: HTML and JavaScript. The names are culminating.html and javascript.js. I have jQuery code in the .js file which is supposed to send the contents of a text file to the div bottom_pane_options.

Here is the jQuery code:

$(document).ready(function() {
    $("#readFile").click(function() {
        $.get('./test.txt', function(data) {
            $("#bottom_pane_options").html(data);
        }, 'text');
    });
});

And the html:

<!DOCTYPE html>
<html>
<head>
    <title>Culminating</title>
    <link href="style.css" rel="stylesheet" type="text/css">

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="./javascript.js"></script>
    <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCJnj2nWoM86eU8Bq2G4lSNz3udIkZT4YY&sensor=false"></script>
</head>

<body>
    <div class="content">
        <div id="googleMap"></div>
        <div id="right_pane_results">hi</div>
        <div id="bottom_pane_options">
            <button onclick="get_parameters()">Try It</button>
            <button id="readFile">Read File</button>
        </div>
    </div>
</body>

With this code, I am getting the error:

No 'Access-Control-Allow-Origin' header is present on the requested resource.

and

XMLHttpRequest cannot load file:///G:/test.txt. No 'Access-Control-Allow-Origin' header is present on the requested resource.

I know I need to add Access-Control-Allow-Origin: * but I'm not sure where.

user3015565
  • 393
  • 3
  • 6
  • 16
  • 3
    The problem is using the `file://` protocol. Install a web server and use that instead. – Jason P Jan 17 '14 at 18:18
  • @JasonP == JSONP. Clever. I see what you did there. – brandonscript Jan 17 '14 at 18:19
  • json p is right.. fyi Access-Control-Allow-Origin: * should be in response headers.... but that's not here the problem.. – Vishal Sharma Jan 17 '14 at 18:20
  • @remus Fitting coincidence. – Jason P Jan 17 '14 at 18:21
  • @JasonP Well I am trying to run everything locally. Do you know of another way I can accomplish what I'm trying to do? – user3015565 Jan 17 '14 at 18:29
  • No, because you can't add response headers (which is what `Access-Control-Allow-Origin` needs to be) without a web server anyway. – Jason P Jan 17 '14 at 18:31
  • If you use chrome, you can use [this](http://stackoverflow.com/questions/18586921/how-to-launch-html-using-chrome-at-allow-file-access-from-files-mode), by default, no browser should allow what you are trying to achieve for obvious security reasons. – Philipp Gayret Jan 17 '14 at 18:38

0 Answers0