This question already has answers here:
Ways to circumvent the same-origin policy
(8 answers)
Closed 6 years ago.
I have a page that uses a ZingChart and loads the data via Ajax from multiple URLs in other domains. The data are in CSV files such as:
1, 2, 3, 4, 5
Or:
2.34,1.01,4.56
What I need is to access these files and construct a JSON for ZingChart in this way:
{"data":[THE_CSV_GOES_HERE], "name":"WHATEVER"}
My first problem is that I ran into the usual CORS problem (whose usefulness I still don't understand very well), and since I don't have control on the servers hosting the CSVs, I used this workaround as explained here:
$.ajax({
url:"http://otherdomain/test.csv", // This is dynamically placed
dataType: 'jsonp',
success:function(res){
return res;
},
error:function(r, error){
alert("Error " + error);
}
});
This raises a parsererror, I suppose because the CSV is not in json format.
If I use "text" instead of "jsonp" I get the CROS error (No 'Access-Control-Allow-Origin' header is present on the requested resource.) If I use "jsonp text" as in the documentation, I still get the parsererror. If I use crossDomain: true, dataType: 'text' to force a crossDomain but specifying it is text, I still get the CORS error.
It seems that I am having a similar problem as this person.
How can I overcome this? I cannot believe that in the modern Web it is not possible to get a string of text from a distributed server without refreshing the page. It looks like a strong limitation. In fact, I would think it is the client who should be able to allow cross domains, not the external servers (which are normally outside the client's control).
You could try getting the csv file with a server side request as outlined here and then just make your ajax call to your server side web method to get the csv string.
What are you using for the backend/hosting environment for your site? You could simply access the CSVs and return them from your backend as you shouldn't have this problem accessing them from the server side...
Related
This question already has answers here:
$.ajax call working fine in IE8 and Doesn't work in firefox and chrome browsers
(3 answers)
Closed 9 years ago.
Maybe I'm the Nth user that ask this question, but I can't figure it out.
The data string of the ajax call seems to be empty or what? Either I don't get any feedback on the succes or error function.
$.ajax({
type:'POST',
url:'http://www.example.com/test.php',
data:'lid=test',
succes: function(data){
console.log(data);
},
error:function(data){
console.log(data);
}
});
I hope someone can help me out with it?
Kind regards,
Frank
There's no succes function. You probably mean success.
This is because of the Same origin policy. you cannot use ajax to call external sites. if you really want to use, you have to use JSONP. Or you can use serverside proxy for this. means, call external site in the server side and do ajax call to the that webservice.
for more information please refer this link and this answer
https://stackoverflow.com/a/8698786/880434
Try this
$.ajax({
type:'POST',
url:'http://www.example.com/test.php',
crossDomain: true,
data:'lid=test',
success: function(data){
console.log(data);
},
error:function(data){
console.log(data);
}
});
AJAX requests are generally limited to same domain. Here is some information I found on another Stack Overflow Answer, Using Access-Control-Allow-Origin header
Alternatively, if your response is of the right format, you could try a JSONP request
You're being blocked by the browser "Same origin policy". That is, you cannot do ajax requests to other than the same domain that the script was loaded from. There are, however, some workarounds:
Use JSONP. This is probably the most cross browser compatible solution
Configure your application to support CORS. This works in most modern browsers, but not in some older.
Create a proxy service on your own server. That is, mount an endpoint, e.g. /externalService that proxies the request on the server side to the remote endpoint. It also will work in all browsers, but will involve more work on the server side.
The server www.example.com should have the cross-domain.xml which will contain the domain names allowed to request and get response. So add your domain from which the request is coming or just add the doamin name as '*' to accept all doamins
This question already has answers here:
Ways to circumvent the same-origin policy
(8 answers)
Closed 9 years ago.
I need to make a cross domain ajax call to a server I own but the problem is that the request must come from the client not the server so proxies wont work for me. Our server will be behind a vpn so it won't be able to reach the internet but the client will be able to so we wanted to do a call home from the client to our metrics server to validate a product key.
My remote domain has a php script that simply writes either a 0, 1, or 2. I need my javascript to read this value in and react to it.
I want to do something simple like this but clearly it won't work. Any suggestions?
$.ajax({
url: callHomeUrl,
type: 'GET',
success: function(res) {
document.write($(res.responseText).text());
}
});
You can use a JSONP style implementation for that to get access to your server which works across all browser without CORS!
Example -
var script=document.createElement('script'):
script.type='text/javascript'; script.src='path/to/the/file';
document.getElementsByTagName('head')[0].appendChild(script);
Note that the file in the server should output the javascript function along with any relevant data.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Ways to circumvent the same-origin policy
I am making a personal web page that extracts the lottery powerball numbers and displays them. I have had success for all but this one link:
var xmlHttp = null;
xmlHttp = new XMLHttpRequest();
xmlHttp.open( "get", "http://www.powerball.com/powerball/pb_numbers.asp", false );
xmlHttp.send(null);
document.body.innerHTML = xmlHttp.responseText;
I checked the xmlHTTP.status and it is 0. However, using Live HTTP headers app I see that the request is sent and I do get a successful HTTP/1.0 200 OK where the page was received on my end. But, there is nothing received in the xmlHTTP object. No responseText, just status 0 for get not initialized.
EDIT: I do not see a Access-Control-Allow-Origin: directive in the return header. Why is this if I am being restricted because I am from a different domain?
You can't use XHR to read data from different origins. Since the request is made as the user of the browser, it is done with everything that might authenticate the user so might retrieve confidential information (which you could then use XHR to copy to your own server).
See this stackoverflow question for work arounds.
I'm not sure how it works nor it's capabilties but you seem to have an answer above on why it doesn't work. I recommend you to use ajax instead, it's simple and works just great.
Here's an example where I use it:
var site = $.ajax({
url: "http://google.com",
type: "GET",
dataType: "html",
async: false
}).responseText;
document.body.innerHTML = site;
Good luck,
Your problem here is the same origin policy. You won't be able to get any data from that website using AJAX unless that website provides a JSONP API (and even then it's not technically AJAX).
You can achieve what you are doing to some extent with an iframe but you will have to include the entire page and not just the relevant part of it.
If what you need to do is Web scraping then you will have some server-side proxy to do it.
Some tools that might help you:
YQL
Yahoo Pipes
Notable Web scraping tools on Wikipedia
Alternative to cross domain ajax is:
write proxy which will request the remote server using CURL
call that proxy file from ajax call
Ok, so basically.
I inject some javascript code into a web page and it uploads an image on that page to another server.
Now I have it working when I run it on my domain (of course), but I need to post the multipart/form-data request to a PHP file that I do not own.
Since it is a upload and not a simple request to just get data, I cannot use jsonp in the initial call since the response would not be in json.
Using James Padolsey's cross domain script, I am able to do $.get and $.post request across domains, but since I am using $.ajax it does not work.
He uses the Yahoo Query Language to acomplish this
This is basically how I am making the request
$.ajax({
url: 'http://website.com/upload.php',
type: 'POST',
contentType:'multipart/form-data',
data: postData,
success: successCallback,
error : function(XMLHttpRequest, textStatus, errorThrown) {
console.log('Error');
}
});
I want to make it completely JavaScript based to avoid making my server do the request.
So to re-cap, I can get the image bytes and make the request with javascript. But so far I cannot make it cross domain since I am $.ajax to set the content Type to "multipart/form-data".
Is there another way to make the request cross domain with or without the YQL?
Making the request with an iframe will not work since the domain of the iframe would change and I would not have access to the response.
This is a well known and difficult problem for web development, know as the Same Origin Policy
Javascript prevents access to most methods and properties to pages across different origins. The term "origin" is defined using the domain name, application layer protocol, and (in most browsers) port number of the HTML document running the script. Two resources are considered to be of the same origin if and only if all these values are exactly the same.
There are several ways around this.
Create your own proxy
Create a page that simply forwards the request to the other server, and returns its response
or, Use Apache's rules to form a proxy (see above link)
Use someone else's proxy
For GET requests which are typical Use YQL to access yahoo's proxy
For POST requests, if the 3rd party supports Open Data Tables
or, Use some other public proxy
See if the 3rd party conforms to the CORS specification
Cross domain POST query using Cross-Origin Resource Sharing getting no data back
If you are willing to allow a little flash on your page, try flXHR
it claims to implement the exact XHR api and also has a jquery plugin
These are pretty much your only options
Right now, I am using curl in PHP to get the HTML source code of some remote web page.
Is there any way I can get the same HTML source code of some cross-domain web page in JavaScript? Any tutorials?
I think you need to know about JSONP to access cross-domain web pages in js
https://stackoverflow.com/questions/tagged/jsonp?sort=votes
Q. How is this any different than issuing an AJAX "GET http://otherdomain.com/page.html" call?
A. The same-origin policy checks the HTTP response headers for AJAX requests to remote domains, and if they don't contain a suitable Access-Control-Allow-Origin header, the request fails.
So, there are two ways to make this work:
If you control the other domain, you can include the following header in the HTTP response:
Access-Control-Allow-Origin: *
(details at MDC)
If you don't, you're stuck implementing a server-side proxy (for example, this simple PHP proxy).
In any case, once you implement one of the two options above, you're left with a simple AJAX call:
$.ajax({
url: "http://mydomain.com/path/to/proxy.php?url="+
encodeURI("http://otherdomain.com/page.html"),
dataType: "text",
success: function(result) {
$("#result").text(result);
}
});
This solution I just found might be of use like the other workarounds...
http://www.ajax-cross-domain.com/