Context
I'm trying to get an Access Token from the Flickr API using their their OAuth specification.
The first step to get an Access Token is to obtain a Request Token. I successfully manage to generate a correctly signed and valid URL to request this token: when I copy/paste the generated URL in my browser, I get the correct response.
Problem
As this part doesn't concern the user, I'm trying to get the Request Token by making a simple Ajax call:
console.log(baseURL + "?" + requestURL);
// When I copy/paste the log result in my browser, it works.
$.ajax({
url: baseURL,
type: 'GET',
data: requestURL,
done: function(data) {
console.log('Request Token data', data);
}
});
The problem is that I get an Access-Control-Allow-Origin issue:
XMLHttpRequest cannot load http://www.flickr.com/...
Origin http://localhost:8080 is not allowed by Access-Control-Allow-Origin.
I've tried using dataType: 'jsonp' as a parameter of the Ajax call without any success:
GET http://www.flickr.com/... 401 (Unauthorized)
Any ideas? Thank you very much in advance for your help!
It is not possible to implement Oauth 1.0 through just javascript without any server side script. Since the flickr's new authentication process is based on Oauth 1.0a. You got to use a server-side script.
Related
I'm working with an endpoint that seems to be built on Django.
Attempting to setup basic aJax communication to it via POST I wrote:
jQuery.ajax({
type: "POST",
url: "http://API-ENDPOINT-URL",
data: "",
dataType: "json",
crossDomain: false,
beforeSend: function(xhr){
xhr.withCredentials = false;
xhr.setRequestHeader('Authorization', 'Token <TOKEN THAT I WAS PROVIDED>' );
},
success: function(results)
{
reqListener(results)
}
});
With those code a few things happened:
I first got a CORS error since I'm trying to build on my local server. I installed this chrome extension to bypass it. (I have no access to the server to enable CORS)
2.I get this error in the console:
XMLHttpRequest cannot load http://API-ENDPOINT-URL. Response for
preflight has invalid HTTP status code 401
looking at the Chrome console for the network request I see this comes back:
{"detail":"Authentication credentials were not provided."}
What am I missing? Am I incorrectly sending the authentication token?
Doing token auth via Javascript without CORS enabled is a suicide mission.
Do yourself a favor like I did and just do it via server side.
I am using jQuery ajax to send request to some API. Due to the CORS policy I got a CORS error on the browser's console
Here's by code
$.ajax({
url: sendHere,//api url
type: 'GET',
contentType: 'text/plain',
crossDomain: true,
beforeSend: function(xhr){
xhr.withCredentials = true;
},
}).done(function (result) {
console.log(result);
}).error(function (err) {
//console.log(err);
});
Error
'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.mywebsite.com' is therefore not allowed access.
I tried to solve this problem by installing a chrome extension to enable allow cross origin request. This extension somehow solved my problem and got a response from the api. But installing an extension is not good.
I also tried to make the request with JSONP(dataType:'jsonp') but the response given by the api is not in json format, it is string so it gives an error.
Code with JSONP
$.ajax({
url: sendHere,//api url
type: 'GET',
crossDomain: true,
dataType:'jsonp',
}).done(function (result) {
console.log(result);
}).error(function (err) {
//console.log(err);
});
Uncaught ReferenceError: E0002 is not defined
where "E0002" is the response string from the api
!!!PLEASE HELP!!!
There are 2 situations -
If you have control over the api code then
make changes in header and add your origin as well.
If you don't have control to change CORS header that is coming from
the api
you have only one option create a backend code(your own api) in any language you prefer that make an http request and get the data. now use your own api to get data on your frontend.
The cors error is cross origin request policy maintained by the browser for security.
To solve your problem either you will have to allow cors request in your server coding or if you do not have access to the server api code you will have to make the api call from your server to api server
Before I start, I'd like to say sorry for my English, it's not my native language.
I'm trying to setup OAuth2 for GitHub authorization.
I stucked at the step, where I should send POST request to github and receive access token. The problem is that when I send POST request my browser automatically downloads file with access token. Since I can't open this file with javascript, I'm trying to get json as response.
In the documentation it's written that I can change accept header and receive json, but I can't write correct POST request.
I've already tried a lot of things, like this:
$.ajax({
method: "POST",
url: "https://github.com/login/oauth/access_token",
dataType: "application/json"
});
or
$.ajax({
url: 'https://github.com/login/oauth/access_token',
headers: {
Accept : "application/json",
}
data: "data",
success : function(response) {
console.log(response);
} })
etc
But I get this error:
XMLHttpRequest cannot load github.com/login/oauth/access_token. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://braga.fedyunin.com.ua' is therefore not allowed access. The response had HTTP status code 404.
Can't find any useful information in google, so I had to register here. Thanks for help.
Read https://developer.github.com/v3/ in section: Cross Origin Resource Sharing
I tried the same thing, but also failed due to the lack of the Access-Control-Allow-Origin header in the response from GitHub API. I contacted GitHub support and found out what was going wrong.
It doesn't work because you are attempting to use OAuth from a web application, which GitHub API does not support. When you authenticate this way, your client_id and client_secret must be in the web page somewhere and sent with the POST request. The entire request, including your client_secret, can be viewed with Firebug or a similar tool. Because it's a bad idea to expose your client_secret, GitHub API will not return the Access-Control-Allow-Origin header, thus preventing you from retrieving the token.
You must issue the POST from the server side and get the token that way. When you do that, the client_secret is on your server, not in people's browsers.
The Ajax request from your site to github.com fails because browsers follow the same origin policy for xhr requests. This means that an xhr request can only be made for a resource on the same origin.
To allow for cross origin requests, the server needs to Whitlelist domains that can access a particular resource.
In your case, to do this, you need to register your site as an application on your github account, by entering the details here:https://github.com/settings/applications/new
I'm trying to integrate digital payment oauth into my app, but I'm having trouble with the redirects these services require. Both PayPal and Stripe require a redirect to their site for approval before redirecting back to my site. But my browser is blocks the redirects to the pay services because, it claims, there are no access-control-allow-origin headers present. Yet I know for a fact that Stripe supports CORS headers: https://stripe.com/blog/stripejs-and-jsonp. What could I be doing wrong?
Importantly, if I manually type the desired uri on my server (localhost.com/authorize) into my browser, the browser redirects just fine, but if the script in my client performs a GET request to the same URI, the browser rejects the redirect with this error:
XMLHttpRequest cannot load
connect.stripe.com/oauth/authorize.
No 'Access-Control-Allow-Origin' header is present on the requested
resource. Origin '127.0.0.1:3000' is therefore not allowed
access. The response had HTTP status code 400.
Therefore, the only difference between a manual GET request using the browser address bar and the programmatic GET request using ajax is what the browser recognizes as the initiator of the request. Why does the initiator determine the success or failure of this action?
I'm performing a jquery ajax request from my client to my server like so:
$.ajax({
url: '/authorize',
type: 'GET',
success: function(data) {
// do something
}.bind(this),
error: function() {
// do something
}.bind(this)
});
I'm using the example code from stripe to perform the authorization and redirects:
app.get('/authorize', function(req, res) {
// Redirect to Stripe /oauth/authorize endpoint
res.redirect(AUTHORIZE_URI + '?' + qs.stringify({
response_type: 'code',
scope: 'read_write',
client_id: CLIENT_ID
}));
});
If you are expecting the user to get redirected to Stripe or Paypal during or after the ajax request you can't issue the redirect on the ajax request itself. Within the ajax context you are just redirecting the ajax request which is why you see the CORS errors.
To redirect the window you would need your app.get('/authorize'... to return back the redirect URL.
Then in your $.ajax success function you could set the window location: window.location = data.redirectUri or open a new window(ugh).
I am using ajax to call a WCF REST based service.
The ajax method is called before the page gets loaded.
I wish to send a "Token" in the header of ajax request. In fiddler this is what I see:
1.)A request to the service without the token in the header.(AJAX Call failure)
2.)A request to the same service with the token in the header.(AJAX Call Passed)
After that everything works fine on chrome and safari. But there is only one service call on IE 10 and Mozilla. As a result the service call fails in IE 10 and Mozilla since there is no token in the header of the request.
This is the method that I call:
function callservice (method, serviceUrl, params, successHandler, errorHandler) {
$.ajax({
crossDomain: true,
type: method,
url: serviceUrl,
beforeSend: function (XMLHttpRequest) { XMLHttpRequest.setRequestHeader("Authorization", Token); },
contentType: "application/json; charset=utf-8",
dataType: "json",
success: successHandler,
error: errorHandler
});
function photos(data) {
alert(data);
console.log(data);
};
}
I control both the Web Service and the application(Which calls this Web Service). This problem does not arise when both the application and web service are hosted on the local host.In that case there is only one successful service call. But there are two AJAX calls when there is a cross domain call.
My question is why doesn't the AJAX request send the token in the first attempt?
And why does the token get sent only in the second AJAX call?
Any kind of help will be greatly appreciated.
The problem was with CORS.Earlier,browsers did not allow ajax requests to be made to a domain which is different than that of a client as it was considered as a security threat.Modern browser's can make cross domain ajax request's as long as the server co-operates with the client.So this is what actually happens when there is a cross domain request from a browser:
1.)First the browser sends 'Preflight' request to the service to gather authorization information(which was a request with the header method as 'OPTIONS' in my case) from the WCF service. In return the Web Service sends Access Control Allow Origin as a part of its response header.And the error being displayed on fiddler as a result of this request was a HTTP 500 error.This AJAX request has nothing in the data field since it was just a way to find the authorization details of the WCF service.
2.)Chrome and Safari then made a second request to the Web Service now that they have the authorization details of the service.Whereas Firefox and IE did not prefer to make a second ajax request to the service since there was an HTTP 500 error for the pre-flight request. Hence both Chrome and Safari were able to communicate with the service.
So the solution was to modify the response from the WCF service in case there is a 'Preflight request' made to it.I modified the response sent by the service in case there is a 'Preflight request' to send an HTTP 200 OK Response. This allowed browsers like IE and Mozilla to send the actual request after the preflight request.
Here is one of the sources which I referred:
http://www.bennadel.com/blog/2327-Cross-Origin-Resource-Sharing-CORS-AJAX-Requests-Between-jQuery-And-Node-js.htm
Hope this helps people facing the same problem.
Cross domain call is under the same origin policy. You can not make the calls by default. You need to use CORS or JSONP or a proxy.
XMLHttpRequest: Unless they changed it, With MS Explorer you'll need to use ActiveXObject("Microsoft.XMLHTTP"). For my ajax call made in plain JS, i use this line to create the object according tyo the browser:
if (window.XMLHttpRequest){
//for most BRowsers
r = new XMLHttpRequest();
} else{
//for Explorer
r = new ActiveXObject("Microsoft.XMLHTTP");
}
then apply your beforesend to the object created here (r) in my case. I truely believe this is your issue with EI. But not tested.