Develop Reference

Javascript cross-domain request

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
});

POST gets converted to GET, when sending request via local apache

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.

Cross domain ajax causing issues to render data

I trying to capture data from an HTML form which will be placed on another website. From that form I need to capture data into my website. But when I tried jQuery Ajax call for cross domain it shows me 302 error with no response.
I've tried this
$('button[type="button"]').on('click', function(){
var data = $('.data-capture-form').serialize();
$.ajax({
type : 'POST',
url: 'http://prospectbank.co.uk/leads/test',
dataType: 'jsonp',
crossDomain : true,
data : data,
contentType: 'application/jsonp'
}).done(function(res){
var resp = $.parseJSON(res);
console.log(resp);
});
});
Where is problem with this code? Any help?
Fiddle Code

If you have access to the server, add the following header:
Access-Control-Allow-Origin: *
And then make JSONP calls
$.ajax({
type: "POST",
dataType: 'jsonp',
...... etc ....
If you do not have access to the external server, you have to direct the request to your server and then make a proxied call to the external server.

Jquery - send post attributes to another domain

I'm trying to send POST attributes from client to server in another domain.
Since simple json dataType won't work in a cross domain,
i've tried with JSONP
<script>
var lookup = {'username':'admin'}
$.ajax({
url: "https://somesite.com/router.php",
type: "post",
data: JSON.stringify(lookup),
dataType: "jsonp",
success: function(response) {
alert(response);
},
failure: alert("failed")
});
</script>
But then it send it as GET and not POST.
This is how it looks like in Fiddler:
Request URL: https://somesite.com/router.php?callback=jQuery172016627637017518282_1429096551228&{%22username%22:%22admin%22}&_=1429096552070
Request Method: GET
Status Code: 500
Query Url
callback: jQuery172016627637017518282_1429096551228
_: 1429096552070
So how can i send this paramter (username=admin) to a cross domain as POST?
Thanks.

You must add method: 'POST' to your ajax call otherwise jQuery appends your data object to the URL (GET parameters)
Source

You can send request from controller or configure target server to accept request.
i.e. in .htaccess
<ifModule mod_headers.c>
Header set Access-Control-Allow-Origin: *
</ifModule>

How to pass authorization header in $.post() method using Javascript?

I want to pass Authorization header while POSTing data to server.
I tried
$.ajax({
url : <ServiceURL>,
data : JSON.stringify(JSonData),
type : 'POST',
contentType : "text/html",
dataType : 'json',
success : function(Result) {
},
beforeSend: function (xhr) {
xhr.setRequestHeader('Authorization', <Authorization Header Value>);
},
error: function (RcvData, error) {
console.log(RcvData);
}
});
But REST service returns error (error code : 500). The same service was working fine with $.post() before adding authorization.
could anyone tell me "How to pass authorization header in $.post()??"

Use
contentType: 'application/json',
You may have gotten data and contentType mixed up.
contentType is the Content-type header you send.
data changes how jQuery treats the data you receive.

The jQuery $.ajax() method accepts a headers value in the settings object.
So:
$.ajax({
// url, data, etc...
headers: {
"Authorization" :"Basic " + myBase64variable,
"Content-Type" :"application/json"
}
});
Source: http://api.jquery.com/jquery.ajax/
PS: Seems you can also pass in a new settings object in the beforeSend parameter. I didn't know this, so thanks for asking this question :)