-1

I have simple JSON File(map.json) located on desktop ..running on localHost perfectly(see screenshot)

I tried many Solution to get it access with $.ajax but not getting success .I also tried with $.getJSON .. Still no luck

here is my fiddle :

http://jsfiddle.net/qVaW3/48/

My Json Output :

enter image description here

My Code Sample

var url = 'http://localhost/map.json';

$.getJSON("http://localhost/map.json", {},
    function (data) {
        $.each(data.items, doSomething1);
    alert('success')
    });

$.ajax({
    type: 'GET',
    url: url,
    async: false,
    contentType: "application/json",
    dataType: 'json',
    success: function (data) {
        alert(this.url);
        //console.log(data);
    },

Chrome Console says .."XMLHttpRequest cannot load http://localhost/map.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://fiddle.jshell.net' is therefore not allowed access."

I searched this post

Why am I seeing an "origin is not allowed by Access-Control-Allow-Origin" error here?

it says use jsonop and dataype .. I used that in my fiddle . still same error ..

and this post

2.$.getJSON not working with local JSON file

Solution says

2.1Use Firefox or run it on a webserver ;) --Not working

2.2 add "Origin null is not allowed by Access-Control-Allow-Origin" in Chrome. -

--- I did by this post

https://in.answers.yahoo.com/question/index?qid=20110807065538AAs4Wog-->

It is not allowing me to add in chrome shortcut

What other things I tried:

1.retrieve json file from server

Solution says use $.getJSON .. I tried still not working(example in upper fiddle link) 2. $.getJSON not working with local JSON file

Solution says use datatype as 'jsonop' .. I also tried that .. No working here is jsfiddle for jsonop

http://jsfiddle.net/yvzSL/905/

  1. http://jquery-howto.blogspot.in/2009/04/twitter-jsonjsonp-api-url.html

Solution says add callback with parameter in url .. my URL dont have such

What can I search for more?

Edit: finally found one extension which removed my error.

Community
  • 1
  • 1
Neeraj Verma
  • 2,174
  • 6
  • 30
  • 51
  • Your json file must be with in your application folder, For example if you are working on tomcat it must be in webapp, In the fiddle you shared, it seems you are trying to fetch that from your c drive. – Nishith Kant Chaturvedi Sep 30 '15 at 09:38
  • Can you open this file in the browser using this link http://localhost/map.json ? Or maybe try this url in js code var url = '/map.json'; – tetta Sep 30 '15 at 09:40
  • Add the JSON file in your server files and access it using the server URL e.g. `http://localhost/aaa.json` – Tushar Sep 30 '15 at 09:41
  • 1
    How about your `URL`, you use `localhost`, does your `json` file existed on your host ? – Neo Sep 30 '15 at 09:41
  • post edited . see my json output – Neeraj Verma Sep 30 '15 at 09:47
  • `localhost` is the machine's address on which the browser's running, when I view your post the `localhost` points to my mahcine's folders. Read about name resolution to find out more. It won't work on other systems until you replace the localhost with the resolvable IP address or a domain name on which you are trying to host the code. – Nikhil Girraj Sep 30 '15 at 10:05
  • I also changed the url to "http:///map.json" ..Still same issue – Neeraj Verma Sep 30 '15 at 10:08
  • why downvoted ? Which Policy I break up Now ? – Neeraj Verma Sep 30 '15 at 10:14

2 Answers2

1

You have already found the answer, you just don't know it yet: You have to set up a webserver.

Your browser doesn't understand the url file:///C:/Users/neeraj/Desktop/map.json. Have a look at whatever server is appropriate for your system... Or if you have a personal website, put your json file on that server and point the url to the file.

Also, read the errors you get in your console. They tend to pretty clear on what is going on - My Chrome gives the following error Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

Fizk
  • 1,015
  • 1
  • 7
  • 19
  • yes I already hosted the file on Local .Post edited .. See my screenshot – Neeraj Verma Sep 30 '15 at 09:48
  • Ok, then you need to change your url from `file:///C:/Users/neeraj/Desktop/map.json`to `http://localhost/map.json` ... Remember that you also need to run the script from your localhost :) – Fizk Sep 30 '15 at 09:49
  • Please see my jsfiddle – Neeraj Verma Sep 30 '15 at 09:51
  • Does your console indicate any errors when running the script? – Fizk Sep 30 '15 at 09:53
  • Chrome Console says .."XMLHttpRequest cannot load http://localhost/map.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://fiddle.jshell.net' is therefore not allowed access."........ I searched this post...... http://stackoverflow.com/questions/9310112/why-am-i-seeing-an-origin-is-not-allowed-by-access-control-allow-origin-error ....still same error – Neeraj Verma Sep 30 '15 at 10:13
  • @NeerajVerma: You should run site on your localhost instead of jsfiddle. Because your localhost not allow to access from jsfiddle. – Neo Sep 30 '15 at 10:16
  • Ok . might be diffrent behaviour on fiddle . I will try on .net server – Neeraj Verma Sep 30 '15 at 10:23
0

Found One Breakthrough (At least on JSFiddle Level) ..

Added this extension to chrome resolve My Error

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi/related

Neeraj Verma
  • 2,174
  • 6
  • 30
  • 51