Im getting a JSON from a server, and when I type the url into the browser, I can see the JSON data. And when I use curl to get the JSON I can also see the data. But when I try to use a html page locally to access the data i get an error. I've tried using
$.support.cors = true;
but I still get an error, is there anyway I can solve this possible cross domain problem?
Thanks,
Matt
Use JSONP (JSON with padding) for crossdomain requests instead. Also see the jquery plugin for easier jsonp handling (even basic error handling). Here is a nice example page.
If the server supports JSONP, then you could get the data by getJSON by appending ?callback=? to the url.
But if the response is just json format like:
{a: 1, b:2}
then you can't use ajax to get the data directly. One solution is to make a proxy, in your server side, get the remote json data and then output it again to avoid cross domain problem.
Other answers have suggested suitable alternatives (JSONP), but to explain why it's not working;
The support of cors is not something you can just turn on. It's something the browser, and the server, has to support.
For more info see here, but to summarise:
The server needs to emit a Access-Control-Allow-Origin: * header (or tailor * to be the domain you wish to allow).
You need to be using Firefox 3.5, Safari 4, Chrome 3, IE 8 or Opera 12.
You can also see the documentation for jQuery.support.cors on the API docs.
Related
Trying to get my html/JS file to read and print firstName from this link:
http://www.w3schools.com/jquery/demo_ajax_json.js, as trial for something else I want to do.
Received this error: Origin null is not allowed by Access-Control-Allow-Origin, so trying to use crossDomain.
Read this: jquery API but not sure how to implement correctly
My JS code (I know it's off, but no idea how to correct it):
var myArray = [];
var jsonArrayObj;
$.ajax{
crossDomain: true}).done(function(){
$(document).ready(function(){
myArray = $.getJSON("http://www.w3schools.com/jquery/demo_ajax_json.js", function(result){
myArray = JSON.parse(myArray);
console.log(myArray.firstName);
});
});
});
I don't understand what function() does in JS either
You cannot use CORS to access a website unless the website allows you to do so. If CORS was allowed on that endpoint, there would be an HTTP header for Access-Control-Allow-Origin: * (or a specific hostname). So the server you are attempting to talk to has to have a header allowing this to happen.
That endpoint works on the w3schools getJSON() demo page because the JavaScript is running from the same domain as the XHR target (so CORS is not needed).
More here: MDN: HTTP access control (CORS)
JSONP/JSON-P is an alternative to CORS but that endpoint doesn't appear to support it either (at least not with the typical callback querystring key).
Its because of CORS. Try to load file locally.
In your code you are using anonymous function. Internet is full of pages to read about javascript functions.
FUNCTIONS:
http://www.w3schools.com/js/js_functions.asp
https://en.wikibooks.org/wiki/JavaScript/Anonymous_Functions
If you are not familiar with JS syntax try to take online course to get your head around it.
JAVASCRIPT COURSE:
http://www.codecademy.com/en/tracks/javascript
Google for more. ;)
I am trying cross domain request from my js file.
First,I was trying JSONP but my target domain URL is not support it. It return plain JSON object.
I am authorize person to access my target domain URL. but i can not modify it as per JSONP response.
SO how can i get JSON response from my target domain URL?
Without modifying a bit the server side there is not much you can do. The general policy is to not to allow cross domain requests.
There are few things worth mentioning though:
Try changing the server side so it will support JSONP.
If the HTTP response contains Access-Control-Allow-Origin header then you can communicate with it with normal AJAX. This feature is supported in modern browsers only. Check this out for more info.
You can do the cross domain requests with Flash and/or WebSockets. However server does have to support them.
I have always done it with jsonp, by passing a callback b/c services return json, if call back is passed then it will wrap all json in callback else they will simple return json.
But in your case
You can look up with this article
http://www.webdevdoor.com/jquery/cross-domain-browser-json-ajax/
Don't know what type application you are developing. But in ASP.NET you can do it by using a proxy page
These links may be helpful:
http://www.codeproject.com/Articles/667611/ASP-NET-Proxy-Page-Used-for-Cross-Domain-Requests
http://encosia.com/use-asp-nets-httphandler-to-bridge-the-cross-domain-gap/
https://gist.github.com/jkresner/3982746
I have url which will return response as Content=image|text=hello|.
While hitting the url with AJAX i am getting Cross domain issues.
So i tried searching for jsonp.But unable to do that.I am able to hit the url using script.
But unable to catch the response into string.My final aim is to hit the url and catch the response in some var x.So i want x=Content=image|text=hello| after hitting the url.
I used ajax it works in IE only.
Please try to help/advice to do the same with jsonp.
You can't do what you've described from a browser doing without Cross-Origin Resource Sharing, which would require that the server supplying the response trusts your document's origin, that the user is using a CORS-enabled browser, and that if you want to support IE8 and IE9, your code handles using the MS-specific XDomainRequest object rather than the standard XMLHttpRequest object on those two browsers (other browsers support CORS via XMLHttpRequest, including IE10 and up).
If you can get the source of this information to reply with JSONP instead, you can do it without CORS. JSONP is a specific format. Here's example of that data in JSONP format:
foo({"Content":"image","text":"hello"})
...assuming you've called it with a URL like http://example.com/some/api?callback=foo (with JSONP, you supply the name of the function — foo in the above — in the query string).
I understand the way to make an ajax call in YUI 3 is using the IO utility.
I want to get the address of a location from Google's geocoding API.
<script type="text/javascript"><!--
YUI().use('io-base', function(Y) {
function complete(id, o) {
var data = o.responseText; // Response data.
alert(o.responseText);
};
Y.on('io:complete', complete, Y);
var request = Y.io("http://maps.googleapis.com/maps/api/geocode/json?language=en&sensor=false&latlng=12,34);
});
//-->
</script>
I get a reply with method OPTIONS and status code 405 Method Not Allowed.
I believe this is because of some "preflight" permission check. I do not receive the desired response. If I copy and paste the url into the browser, I see the json data.
I could post the ajax request to a php script on my own domain and get the json response with curl.
But why have this extra step if I could just get the data in javascript?
So what can I do to solve this? Is the IO utility not the right library to use?
You're making a cross-domain XHR request, and running into the "Same origin policy", a generic restriction in client-side JavaScript. See for example Why do I still receive 405 errors even though both URLs are from XXXX.com?
There are various ways to work around this problem:
1) Make a server-side request in PHP, as you suggest
2) Use the YUI jsonp module
3) Use the YUI YQL module, which proxies your request through Yahoo! servers and handles JSONP housekeeping for you
There are many other ways to tackle this problem, but those three should get you started.
Y.io has support for cross domain requests. See http://yuilibrary.com/yui/docs/io/#cross-domain-transactions
You need to properly config it with the "xdr" property, and load the "io-xdr" module, etc. This example uses it as well: http://yuilibrary.com/yui/docs/io/weather.html
I tried so many tutorials online but everything I try is really old and fails - I can't even create an XMLHTTPRequest object!
I just want to get the header from google.com - how can I do that?
You would use xhr.getResponseHeader() to get a single header, or xhr.getAllResponseHeaders() to read all of the headers from an XMLHttpRequest response.
The reasons this won't work for you:
XMLHttpRequest is case sensitive. If you are using HTTP in all caps, it will fail.
Unless you are a google employee adding code to google.com, your request falls victim to the same origin policy. You'll have to use your server as a proxy to get headers from a google request.
You cant simply do this by JS. You'll have to use AJAX and do a server request to PHP,ASP, Java or whatever. The XMLHTTPRequest should do it - if you really want to do it manually. But it will really not work with foreign domains, so you are forced to do the XMLHTTTPRequest to a page on your server which will deliver the header.