Error in CORS ajax request - php

In php i do echo json_encode($dump);
If echo it out using php i get {"load":"0.64 0.58 0.52 2\/361 12978\n","procs":"8\n"}
Than i make CORS Request using dataType:jsonp
$(function () {
$.ajax({
type: "POST",
ContentType: 'application/json; charset=utf-8',
url: 'http://labs.isaumya.com/loadtest/load',
dataType: "jsonp",
success: function (response) {
console.log(response.data);
},
error: function (xhr, status, error) {
console.log(error);
}
});
});
I get this error on the console:
DEMO

You are dealing with JSON, not JSONP. dataType: "jsonp", should be dataType: "json",
You can remove the data parameter entirely if your server outputs the correct content-type header for JSON (application/json).
JSONP is a hack to work around the Same Origin Policy from before CORS was designed and implemented by browsers. CORS is the modern approach to making cross origin requests. You use it instead of JSONP.
Both CORS and JSONP are technologies that must be supported by the server. http://labs.isaumya.com/loadtest/load doesn't appear to support either. You will have to modify the server if you want it to supply data in JSONP format or grant permission with CORS.
Unrelated to your actual problem:
You have no data parameter so you aren't sending JSON to to the server, remove the ContentType parameter. Since you aren't POSTing any data, you should probably be making a GET request, not a POST request.

Related

CORS not working with JQuery Ajax

I have some JQuery code that logs a user into the system by connecting to my api, which is on a subdomain - api.foo.com
My JQuery code is:
$.ajax({
type: "POST",
crossDomain: true,
url: "http://api.foo.com",
data: {json:"true",com:"login",username:$('#LoginUsername').val(),password:$('#LoginPassword').val()},
dataType: "json",
success: function(Data) {
console.log("Request sent and data received");
console.log(Data);
}
});
The issue is that in the console, I get the error XMLHttpRequest cannot load http://api.foo.com/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://foo.com' is therefore not allowed access.
I know for a fact that I have set the 'Access-Control-Allow-Origin' header to * in my php code - header("Access-Control-Allow-Origin: *"); and I have checked in on google chrome (See screenshot below).
I originally opened a question about this issue but realised I had misspelled the header, whereas this time that is not the case.
The screenshot below is of the headers I receive when I connect to api.foo.com directly.

Format of jsonp response

I need a jsonp response from cross domain url. My jsonp code is here
$.ajax({
dataType: 'jsonp',
async: false,
contentType: "application/json",
jsonpCallback: "domaincheck",
data:{
id:k,
domain:l
},
url: 'http://example.com/param',
success: function (data) {
console.log(JSON.stringify(data));
},
In the php file, the output is like this:
<?php
echo $_GET['callback']."([Correct])";
?>
I knew that the data what I am returning back is incorrect. Because I think we should pass response as json data only. But in this case, sending only "correct" as response, how should we set it, so that we get the response correctly.
The error what I get in console is this:
Uncaught SyntaxError: Unexpected identifier

CORS and Cookies working together with PHP headers and jQuery

I'm trying to use php headers to accept cookies and various types of ajax requests to my api. Also the request can come from any server, so I can't whitelist them. I'd like to use
header("Access-Control-Allow-Origin: *");
but this blocks cookies. Is there a way around this?
Here's the setup for the ajax calls with jquery:
$.ajax({
type: 'POST',
data: $('#loginForm').serialize(),
crossDomain:true,
dataType: 'json',
beforeSend: function(xhr){
xhr.withCredentials = true;
},
url: "https://myothersite.com/login_submit.php"...
You can't set or read cookies on cross origin resource sharing requests through JavaScript. Cookies respect the browser's same origin policy.

AJAX headers ending up in HTTP_ACCESS_CONTROL_REQUEST_HEADERS on PHP side

I'm trying to get the SalesForce Rest API to work and I've debugged my problem down to this point:
When I make an AJAX call from my web app to my back-end (which is on a different domain than the backend), all of the AJAX headers end up crammed into $_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS'] and there is no way for me to get access to their values.
return $j.ajax({
type: 'POST',
url: my_endpoint_url,
cache: false,
processData: false,
data: 'grant_type=refresh_token&client_id=' + this.clientId + '&refresh_token=' + this.refreshToken,
success: callback ,
error: error ,
dataType: "json",
beforeSend: function(xhr) {
if (that.proxyUrl !== null) {
xhr.setRequestHeader('SalesforceProxy-Endpoint', url);
}
}
});
On the server side, I only receive:
[HTTP_ACCESS_CONTROL_REQUEST_HEADERS] => accept, salesforceproxy-endpoint, doiwork, origin, content-type
How can I access the value of "salesforceproxy-endpoint" over on the server side? Likewise, I can't seem to find the "data" of the ajax call anywhere..
UPDATE: Just for giggles I moved my end-point to the same domain. Now it is working as expected.
[HTTP_SALESFORCEPROXY_ENDPOINT] => https://login.salesforce.com//services/oauth2/token
Is there any way to get this working cross domain?
You just got aware what the Same origin policy is ;)

full URL path in ajax

Is it okay to put full URL path in ajax? I'm having problems accessing the url and I'm getting status 0 for my error response.
$.ajax({
url: "http://fullurlpath.com/php/myphppagedata.php",
type: "GET",
data: "somedata="+somedata,
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.responseText);
}
}).error(function(xhr){
alert(xhr.responseText);
alert(xhr.status);
}).done(function(data){
alert(data);
});
Also, inside my http://fullurlpath.com/php/myphppagedata.php I have
header('Access-Control-Allow-Origin: *');
http://en.wikipedia.org/wiki/Same_origin_policy
http://bob.ippoli.to/archives/2005/12/05/remote-json-jsonp/
Instead of requesting it with your client's browser using jQuery, I would make a page on your own domain, for instance call it request.php with:
echo file_get_contents("http://fullurlpath.com/php/myphppagedata.php");
This way your server will request the resource, so that you won't have the same origin policy issues. Then ajax this file instead.
$.ajax({
url: "request.php",
...
You can also use cURL instead of file_get_contents() for more elaborate functionality.

Categories