I recieve an error (XMLHttpRequest cannot load https:// www.cloudflare.com/api_json.html?tkn=&email=&z=&a=rec_load_all&callback=%3F. Origin http:// domainmanager.tech-bytes.org is not allowed by Access-Control-Allow-Origin.) (spaces inserted in URLs due to Stack Overflow link limit) when trying to send a JSONP request via jQuery to CloudFlare. The CloudFlare API states that you can ask for a JSONP callback by appending a &callback=mycallback parameter. I am not sure if I am supposed to replace mycallback with something, I tried replacing it with ? as that is what some other resources said, or if I have to do some other modifications to my code.
Try in this way for cross domain request.
$.ajax({ url: "yourUrl",
data:{paramName1: JSON.stringify(paramValue1),paramName2: JSON.stringify(paramValue2)},
contentType: "application/json; charset=utf-8",
dataType: "jsonp",
success: function(data) {
alert(data.d);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
You can use CORS for this purpose.
Example code:
jQuery.support.cors = true;
function CrosDom_ajax(url) {
if (window.XDomainRequest
&& $.browser.msie
&& $.browser.version < 10) {
xdr = new XDomainRequest();
if (xdr) {
xdr.onload = function () {
alert(xdr.responseText);
};
xdr.open("get", url);
xdr.send();
}
}
else {
$.ajax({
url: url,
success: function (response) {
},
error: function (data) {
}
});
}
}
Also you need to Write the following code in server side, to allow cross domain access
Response.AppendHeader("Access-Control-Allow-Origin", "*");
Related
I am currently trying to connect to Google OAuth with JS on server-side and am getting this error despite trying everything I could find on the web.
$('#sign-in-button').click(function () {
auth2.grantOfflineAccess().then(signInCallback);
});
function signInCallback(result) {
console.log(result)
console.log(typeof result)
if (result['code']) {
$('#sign-in-button').prop('disabled', true);
$.ajax({
type: 'POST',
url: 'http://localhost:8080/auth',
headers: {
'X-Requested-With': 'XMLHttpRequest'
},
contentType: 'application/json; charset=utf-8',
success: function (successResult) {
//todo next flow stage
console.log('Ready to proceed to next stage!')
},
processData: false,
data: JSON.stringify(result)
})
} else {
// todo handle error
console.log('An error occurred within the OAuth stage.')
}
}
The code above is what I am using on the client. The below code is the Express route for /auth.
app.post('/auth', function (req, res) {
if (req.header('X-Requested-With')) {
let oAuth2Client = getOAuthClient(); // this method uses return new OAuth2(clientId, clientSecret, redirectUrl) where redirect url = 'http://localhost:8080/link'.
let code = req.body['code'];
if (code) {
oAuth2Client.getToken(code, function (error, tokens) {
if (error) {
console.log(error.stack);
console.log('Whoops, an error occurred!')
res.send('An error occurred during the OAuth backend stage.')
} else {
console.log('No error.')
console.log(tokens)
google.options({auth: oAuth2Client})
}
})
} else {
//todo fail no code
console.log('Code failure.')
}
} else {
//todo return fail CSRF
console.log('CSRF failure.')
}
})
On cloud console, you can see my efforts of trying every possible URI under the sun!
Most strangely, in the Gaxios error, the URI is correct in the request body!
But I still get redirect_uri_mismatch
What can I try to fix this other than what I have listed below?
Add all the extra URI variants to cloud console
Use oAuth2Client.getAuthUrl() instead of my client side code
Different redirect URI (with & without slash etc.)
I have the HTML file and try to send the request from that page with JavaScript or jQuery, but it doesn't send the "header" to the server and it gives me the error 405. I've read related questions and try out some of them but the error code was the same. I use Fiddler to see the final request and in that there is no header as well as the method change to the OPTION!
some of the codes I used:
$.ajax({
url: "URL",
type: "GET",
beforeSend: function(xhr){xhr.setRequestHeader('Authorization', 'Bearer HASHKEY');},
success: function() { alert('Success!'); }
});
or
var xhttp = new XMLHttpRequest();
xhttp.open("GET", "URL", true);
xhttp.setRequestHeader("Authorization", "Bearer HASHKEY");
xhttp.setRequestHeader('Content-Type', 'text/plain');
xhttp.setRequestHeader('Accept', 'application/json');
xhttp.send();
xhttp.onreadystatechange = function () {
var response = xhttp.responseText;
if (xhttp.readyState == 4 && xhttp.readyState == 200) {
var obj = JSON.parse(response);
// handle data as needed...
alert("obj" +obj);
}
};
Totally speaking I'm looking for a piece of code which can call API from the HTML which is content header: authorization.
Cheers
Try this:
$.ajax({
url: "URL",
type: "GET",
headers: {
"Authorization": "Bearer HASHKEY"
},
success: function() { alert('Success!'); }
});
Also, check that your server configuration supports CORS and explicitly allows the Authorization header.
I have created an website wherein I'm trying to call the MS Web CRM as below
$(function () {
var ODataURL = "https://***.crm5.dynamics.com/xrmservices/2011/OrganizationData.svc/Core_territorytypeSet";
$.ajax({
type: "GET",
contentType: "application/json; charset=utf-8",
datatype: "json",
url: ODataURL,
beforeSend: function (XMLHttpRequest) {
XMLHttpRequest.setRequestHeader("Accept", "application/json");
},
success: function (data, textStatus, XmlHttpRequest) {
//
// Handle result from successful execution
//
// e.g. data.d.results
alert(JSON.stringify(data));
},
error: function (XmlHttpRequest, textStatus, errorObject) {
//
// Handle result from unsuccessful execution
//
alert("OData Execution Error Occurred");
}
});
});
I'm getting 'unauthorized' error.
How can we authorize the user before making call to the Api in javascript??
Thanks in advance
You would first need to register your application with Azure Active Directory. Then use the client id to retrieve a token that need to be passed with your web API calls. You can find a good walkthrough here: https://msdn.microsoft.com/en-us/library/mt595797.aspx
can anyone please tell me why this is bad request
var searchurl = "https://accounts.google.com/o/oauth2/token";
$.ajax({
dataType: "json",
url:searchurl,
context: {code:auth_code, client_id:'clientid', client_secret:'secret', redirect_uri:'http%3A%2F%2Flocalhost:8085%2FGmailIntegration%2FgetAuthResponse.jsp', grant_type:'authorization_code'},
type:"POST",
contentType:"application/x-www-form-urlencoded",
success:function(data) {
alert(data);
},
error: function(jqXHR, exception) {
console.log(jqXHR);
}
});
I got this working.. i am sharing the code for those who are stuck with this:
$.ajax({
dataType: "json",
url:searchurl,
data: {code:code, client_id:'clientid', client_secret:'secret', redirect_uri:'http://localhost:8085/GmailIntegration/getAuthResponse.jsp', grant_type:'authorization_code'},
type:"POST",
contentType:"application/x-www-form-urlencoded; charset=utf-8",
crossDomain:true,
cache : true,
success:function(data) {
alert(data);
},
error: function(jqXHR, exception, errorstr) {
console.log(jqXHR);
alert(errorstr);
}
});
but now i have new issue. The url get 200 OK response but i am not getting response at all
OAuth2 user agent flow is recommended for JS clients, see https://developers.google.com/accounts/docs/OAuth2UserAgent
Is there any specific reason you want to use the web server flow in a JS app?
Late Breaking Update:
Hi Dashron,
I've been doing some independent research & what I am seeing is that every other video API that supports jQuery Ajax i.e. JSONP will deliver the following file during an API call:
crossdomain.xml which basically looks like this:
<cross-domain-policy>
<allow-access-from domain="*" />
<allow-http-request-headers-from domain="*" headers="*" />
<site-control permitted-cross-domain-policies="master-only" />
</cross-domain-policy>
This is at the heart of CORS.
I get this file from YouTube, SoundCloud and DailyMotion.
However when using fiddler utility to debug the Vimeo API testing as per your suggestions this file never shows up in the traffic interchange.
Further if I change the Ajax call type to merely JSON (no JSONP) I get a 302 response which indicates a redirect but does show the accept header as per your instructions. Obviously JSONP is required or clientside API is useless but this leads me to believe your API team has:
A. Not tested jQuery AJAX and;
B. Has not enabled CORS
I hope this helps you get API v. 3.0 CORS compliant for jQuery Ajax JSONP traffic.
Thanks,
Len
Original Missive:
I am trying to use jQuery Ajax to perform a simple videos search.
According to Vimeo API support this is supported with the new beta api version 3:
Excerpt from their email to me:
The good news, is API3 will support this feature. It is currently in Beta, but we have many people using it in production apps.
You can create a new app at https://developer.vimeo.com/apps/new?oauth2=enabled, or enable it on your app by adding “?oauth2=enabled” to the end of your apps edit page.
You can find VERY EARLY documentation at developer.vimeo.com/api/docs.
As long as you don’t include your application secret in your requests, everything should work fine.
Let me know if you run into any issues!
END EXCERPT
I have tried to do this unsuccessfully with the following code:
var urlX = 'http://api.vimeo.com/videos?query=elvis';
$.ajax({
url: urlX,
type: "GET",
beforeSend: function (req) {
req.setRequestHeader("Vimeo-Client-ID", "<My API Key>");
req.setRequestHeader('Content-type', 'application/xml; charset=UTF-8');
},
dataType: "jsonp",
success: function (data) {
alert("SUCCESS");
},
error: function (xhr, ajaxOptions, thrownError) {
alert("Error: " + thrownError);
}
});
}
I built this by referring to the following spec:
https://developer.vimeo.com/api/docs/spec
This does not work. Can anybody help as it has been 3 days without any further responses from Vimeo API support.
Thanks!
UPDATE:
I tried this and it does not work. Please supply sample code to save time all around. Thanks very much!!
Thanks for the reply. Unfortunately this does NOT work:
urlX = 'http://api.vimeo.com/videos?query=elvis&client_id=XXXXXXXX';
$.ajax({
url: urlX,
type: "GET",
beforeSend: function (req) {
req.setRequestHeader('Accept', 'application/vnd.vimeo.*+json;version=3.0');
},
dataType: "jsonp",
success: function (data) {
alert("SUCCESS");
},
error: function (xhr, ajaxOptions, thrownError) {
alert("Error: " + thrownError);
}
});
I also tried this UNSUCCESSFULLY... :((
urlX = 'http://api.vimeo.com/videos?query=elvis&client_id=XXXXXXXX';
$.ajax({
url: urlX,
type: "GET",
headers {
"Accept": "application/vnd.vimeo.*+json;version=3.0"
},
dataType: "jsonp",
success: function (data) {
alert("SUCCESS");
},
error: function (xhr, ajaxOptions, thrownError) {
alert("Error: " + thrownError);
}
});
I tried this unsuccessfully too:
$.ajax({
url: urlX,
type: "GET",
headers {
"Content-Type": "application/vnd.vimeo.*+json;version=3.0"
},
dataType: "jsonp",
success: function (data) {
alert("SUCCESS");
},
error: function (xhr, ajaxOptions, thrownError) {
alert("Error: " + thrownError);
}
});
And finally I tried this as per the following StackOverflow article:
Cannot properly set the Accept HTTP header with jQuery
$.ajax({
url: urlX,
type: "GET",
headers {
Accept: "application/vnd.vimeo.*+json;version=3.0",
"Content-Type": "application/vnd.vimeo.*+json;version=3.0"
},
dataType: "jsonp",
success: function (data) {
alert("SUCCESS");
},
error: function (xhr, ajaxOptions, thrownError) {
alert("Error: " + thrownError);
}
});
Without any specific error message I have no way of deducing a solution and would be tremendously grateful if a working example were supplied. I am sure it would help other jQuery developers using v3.0 API.
Thanks!!
UPDATE - Looks like a cross-domain security issue
One of my developers took a look at this and suggested that since json went through but not jsonp there is a "CORS" iissue; in other words your API does not allow cross-domain requests as per the error received:
Error: jQuery18305652002056594938_1376096997218 was not called
I think you guys should absolutely test this from a domain other than vimeo.com as we can go back & forth forever but if cross-domain calls are not being supported no amount of coding on my part can affect that. That is a job for your staff to enable cross-domain requests.
urlX = 'http://api.vimeo.com/videos?query=elvis&client_id=d0b4a83fc5c12570e9270fc54ef6ecabb8675fcf';
$.ajax({
url: urlX,
type: "GET",
beforeSend: function (req) {
req.setRequestHeader('Accept', 'application/vnd.vimeo.*+json;version=3.0');
},
dataType: "jsonp",
success: function (data) {
alert("SUCCESS");
},
error: function (xhr, ajaxOptions, thrownError) {
$("#errorMsg").text(thrownError);
}
});
}
Thanks,
Len
Thanks to Vimeo support I was finally able to achieve a working sample. My error was assuming that JSONP was required even though it is not. Since Vimeo is CORS enabled in version 3.0 of their API the jQuery getJSON() function will work cross-domain.
Here is a working sample. Hopefully this will save someone a bit of time and effort.
function TestVimeo() {
urlX = 'https://api.vimeo.com/videos?query=elvis&client_id=XXXXXXXXXXXXXX';
$.getJSON(urlX, function (data) { console.log(data); })
.success(function (payload) {
console.log("second success");
})
.error(function (jqXHR, textStatus, errorThrown) {
console.log('******* ' + "error: " + textStatus + ' *******');
});
}
It looks like the specs are out of date.
The Vimeo-Client-ID header is no longer respected.
All you need to do is add your client id to the url as a querystring parameter.
http://api.vimeo.com/videos?query=elvis&client_id=XXXXXXXXX
Additionally, you will need to provide the proper accept headers as stated in the docs, Accept: application/vnd.vimeo.*+json;version=3.0