I have a problem.
Is it possible to make a request to a different domain? For example, I have a website test.com and it has to take some data from http://www.google.lv/search?q=fat+pumpkin. I already have tried jQuery .load method, XMLHttpRequest(), but the result is always the same, I get error: Failed to load https://www.google.lv/search?q=fat+pumpkin&.rtng: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
Is there some option to overcome it without PHP or another server language?
The same question as your case : Access-Control-Allow-Origin error sending a jQuery Post to Google API's.
Basically you need to add a crossDomain option for ajax request, example:
$.ajax({
url: 'https://www.googleapis.com/moderator/v1/series?key='+key,
data: myData,
type: 'GET',
crossDomain: true,
dataType: 'jsonp',
success: function() { alert("Success"); },
error: function() { alert('Failed!'); },
beforeSend: setHeader
});
Related
While submitting the data :
Error Message : XMLHttpRequest cannot load https://docs.google.com/forms/d/xxxxxxxxxxxxx/formResponse. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8090' is therefore not allowed access. The response had HTTP status code 405.
$scope.postDataToGoogle = function(){
$http({
method: 'POST',
crossDomain: true,
url: 'https://docs.google.com/forms/d/XXXXXXXXXXXXXXXXXXXXXXXX/formResponse',
// dataType: "xml",
data: tempData,
}).success(function(data,status){
//alert(data)
console.log("Success");
}).error(function(data,status) {
console.log('Error:' + status);
});
}
Its not about jquery or angular, CORS allows or disallow done by Back-end server.
Google might not support this.(to access https://docs.google.com)
CORS (Cross-Domain Resource Sharing) allows you to more cleanly separate your front-end from your back-end.
CORS is a group of special response headers sent from the server that tell a browser whether or not to allow the request to go through
Access-Control-Allow-Origin: http://example.com.
Why does jQuery throw an error when I request external resources using an Appcache Manifest?
I do have tried with angular still not able solve it, but with jQuery its works for me.
$.ajax({
url: 'https://docs.google.com/forms/d/xxxxxxxxx',
data: tempData,
type: "POST",
dataType: "xml",
statusCode: {
0: function () {
alert('error');
},
200: function () {
alert('Thank you for your valuable feedback');
}
}
})
I am trying to send a post request with the following code. But the request goes as GET request, instead of POST. How to fix this.
$.ajax({
url: 'https://www.exampleurl.com',
method: 'POST',
headers: {"Access-Control-Allow-Origin": true},
data: {url:'bla',call:"trans"}
dataType: 'jsonp',
success: function(data){
console.log('succes: '+data);
}
});
This is the error I am getting
XMLHttpRequest cannot load https://example.com. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access. The response had HTTP status code 401.
When removed the header Access-Control-Allow-Origin, I am getting a 404 error
I don't think, you can use a POST method with jsonp request. jsonp callbacks only for with GET method. Have a look at link .
You don't have to pass parameters in url attribute when you want to send POST request you should use data attribute instead, take a look at jQuery.ajax() :
$.ajax({
url: 'https://www.exampleurl.com',
method: 'POST',
data: {q:1, q2:2},
headers: {"Access-Control-Allow-Origin": true},
dataType: 'jsonp',
success: function(data){
console.log('succes: '+data);
}
});
Hope this helps.
I'm trying to use JSONP to request a feed on another domain. I know that the content type should be JSON or JavaScript, but it is text/plain and I don't have control over the server so I can't change the header. How can I get an AJAX call to work?
Here is what I have so far -
function asdf() {
$.ajax({
url: "http://example.com/path/to/sharepoint/_vti_bin/listdata.svc/TestCalendar/$count",
jsonp: "callback",
dataType: "jsonp",
contentType: "text/plain",
// work with the response
success: function( response ) {
console.log( response ); // server response
}
});
}
If I just try a regular request, obviously I just get a CORS error.
XMLHttpRequest cannot load http://example.com/path/to/sharepoint/_vti_bin/listdata.svc/TestCalendar/$count. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://example.com' is therefore not allowed access. The response had HTTP status code 401.
Try to execute directly your URL in a browser to be sure that all is working fine
After that, try with this JQuery configuration:
$.ajax({
url : "YOUR_URL",
dataType : 'jsonp',
crossDomain: true,
type : 'POST',
timeout : 30000, // in milli seconds
cache : false
success:function(response) {
console.log(response);
}
});
I've look at all the cross-domain ajax questions, and still cannot figure out what is wrong with my JSONP request. All I am trying to do is get the contents of an external page, cross domain using JSONP. Unfortunately, firefox still gives this:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://stackoverflow.com/?_=1415036764663. This can be fixed by moving the resource to the same domain or enabling CORS.
Code:
var url = "http://stackoverflow.com";
$.ajax({
url: url,
type: "GET",
datatype: "jsonp", //allows cross-domain ajax without cors (GET only)
async: true,
cache: false,
timeout: 15000,
success: function(html) {
console.log(html);
}
});
You have a small typo there:
…
dataType: "jsonp", // dataType instead of datatype
…
JavaScript variables and object properties are case-sensitive.
I've tried the following basic Reddit API morechildren request using mootools:
var moreChildren = new Request({
async: true,
url: 'http://www.reddit.com/api/morechildren',
method: 'post',
data: {
api_type: "json",
children: "cl2vjlp",
link_id: "2ijczu",
sort: "top"
},
onSuccess: function(response){
commentData = JSON.parse(response);
console.log(commentData);
}
});
// tried above request with and without the following line
delete moreChildren.headers["X-Requested-With"];
moreChildren.send();
And I'm receiving a XMLHttpRequest cannot load http://www.reddit.com/api/morechildren.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 403. in Google Chrome.
Observations:
Adding .json to reddit/api/morechildren(.json) does not resolve
deleting "X-Requested-With" header does not resolve
Any help is greatly appreciated. :)
This is because of same origin policy - CORS.
you do well to remove this:
// tried above request with and without the following line
delete moreChildren.headers["X-Requested-With"];
but if the reddit site does not support it, it won't work.
you have 2 options:
local proxy, ajax call to local, local server-side to reddit, back and output to browser
use JSONP where available.
can't test your case as it needs oauth but via info.json which is GET, you can:
http://jsfiddle.net/dimitar/zy3rwpjs/
new Request.JSONP({
url: 'http://www.reddit.com/api/info.json',
callbackKey: 'jsonp',
data: {
url: 'http://www.reddit.com/buttons'
},
onSuccess: function(response){
console.log(response.data, response.kind);
}
}).send();
obviously, when it expects POST, things get more complex... JSONP works as GET.
if all you care about is your own project and google chrome, you can start with with --disable-web-security flag, which will allow the call.