Jquery - send post attributes to another domain - javascript

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>

Related

Is it possible to add header ini ajax post cross domain?

i try to add header for authorization in ajax post to external domain. The code looks like this
$.ajax({
url: "externalUrl",
headers : {
"Authorization": token
},
type: "POST",
data: (data),
crossDomain : true,
dataType: "json",
success: function(result){
//run something here
}
});
i've set the CORS setting in my server too
res.Header().Set("Access-Control-Allow-Origin", "*")
res.Header().Set("Access-Control-Allow-Method", "*")
res.Header().Set("Access-Control-Allow-Headers", "*")
but when client try to post ,the method change into OPTIONS
Is it possible to add header ini ajax post cross domain?
problem solved by adding handler for options and add allow header in that handler as suggestion from madalin ivascu. it's possible!

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.

Request JSONP with text/plain MIME Type

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

Get prayer time JSON data using JQUERY and Ajax

I want to READ JSON data using Jquery ana Ajax from this link
http://praytime.info/getprayertimes.php?lat=31.950001&lon=35.9333&gmt=180&m=3&y=2013&school=0&format=json&callback=?
and this is my code:
$(document).ready(function() {
var strUser ="http://praytime.info/getprayertimes.php?lat=31.950001&lon=35.9333&gmt=180&m=3&y=2013&school=0&format=json&callback=?";
$.ajax({
url: strUser ,
dataType: 'jsonp',
success: function(data){
jQuery.each(data, function(){
alert("yes");
});
}
});
});
I tried this code with other links , and it's correct, but from the specified link I don't get any out put, can you help me??
The url you are trying to access with JSONP doesnot support it. The server will need to return the response as JSON, but also wrap the response in the requested call back. So a way to solve this problem is using a server side proxy, which fetches the response from the specified url and passes it on to your client side js, like:
$.ajax({
type: "GET",
url: url_to_yourserverside_proxy,
dataType: "json",
success: function( data ) {
console.log(data);
}
});
where
url_to_yourserverside_proxy is a server side file that fetches response from the url specified
URL is outputting json but for cross domain need jsonp.
Not all API's provide jsonp. If cross domain API doesn't provide jsonp and isn't CORS enabled you will need to use a proxy to retrieve data due to same origin policy

Categories

Resources