I am trying to make a request to the Eventbrite API. I can successfully make a call from Postman (chrome extension similar to fiddler)
url: https://www.eventbriteapi.com/v3/users/me/owned_events
Header: authentication : Bearer Y5R3SQRPRZBULIHYQHTD
This successfully gets back what I'm looking for. When I try to make the same call through AngularJS
function getLiveEvents() {
return $http.get(url, {
cache: true,
headers: {
'Authorization': 'Bearer Y5R3SQRPRZBULIHYQHTD',
'Content-Type': 'application/x-www-form-urlencoded',
'Accept': '*/*',
}
}).then(function (response) {
return response.data;
});
}
I always get the error XMLHttpRequest cannot load https://www.eventbriteapi.com/v3/users/me/owned_events?status=live. The request was redirected to 'https://www.eventbriteapi.com/v3/users/me/owned_events/?status=live', which is disallowed for cross-origin requests that require preflight.
Is there something I can do with my AngularJS request so that it will be successful?
FYI: The access-token is real, I'm not concerned about someone using it because it's just a test account.
Related
I've got a problem. Every time I have to clear caches and cookies first and then the AJAX request can be requested successfully. Otherwise I will get 403 response from the server, which is Django RESTful framework.
This is what I request
$.ajax({
url: url_add,
type : 'PATCH',
dataType: 'json',
data: {
'followup_customer': note,
},
statusCode: {
200: function() {
window.location.reload();
}
},
});
You should add a correct HTTP header, containing CSRF token as described in django docs.
I'm calling facebook graph api using ajax as follows,
$.ajax({
url: "https://graph.facebook.com/oauth/access_token?client_id=CLIENT_ID&client_secret=CLIENT_SECRET&grant_type=fb_exchange_token&fb_exchange_token="+accessToken,
type: 'GET',
contentType: "application/json",
success: function (response) {
},
error: function (error) {
console.log('Error occurd while retrieving long live access token');
}
});
But it shows error as follows,
Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.
If I make the request using postman or using the browser it works fine. Appriciate any help to resolve this issue. I tried several answers regarding the Access-Control-Allow-Headers in the server side, but in this case I don't have the control over facebook side.
In my website, something weird is happening while running in Internet Explorer. My website and API are hosted separately. API is having anonymous authentication with token based authorization. MVC website is having windows authentication. Most of the times everything works as expected. But sometimes what happens is while calling the API from javascript my Authorization is headed changed to NTLM instead of Bearer. I am giving some screenshots of the same scenario.
Successful API Call:
401 Unauthorized Call:
My Ajax is as follows:
$.ajax({
url: src,
type: 'GET',
cache: false,
async: true,
data: (parameters),
headers: {
'Authorization': 'Bearer ' + sessionStorage.getItem('token')
},
contentType: 'application/json'
dataType: 'json',
success: successCallback,
error: function (xhr, textStatus, errorThrown) {
ErrorPopup("error occur");
}
,
beforeSend: function (xhr, settings) { xhr.setRequestHeader('Authorization', 'Bearer ' + sessionStorage.getItem('token')); }
});
I have debugged all API calls and always authorization header is set to Bearer ... still, somehow some way NTLM is taking control of it and making my API calls unauthorized. Please share some insights how could I solve this. I cannot change authentication in IIS as it's beyond my control. If you need any more inputs I can provide that too.
It looks like there is a redundancy in your authorization headers (headers array + beforeSend). Remove one of them and test (reason : RFC 2616 says that several headers with the same name should be concatenated on the same line, and maybe the server is replying with an NTLM authorization request to such a request that it doesn't allow).
I've been going through the app authorization steps here https://developer.microsoft.com/en-us/graph/docs/authorization/app_authorization, but can't seem to get the request to work. I consistently get errors saying
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:8080' is therefore not allowed access."
This seems weird as I am including that header.
$.ajax({
type: "POST",
url: url,
crossDomain: true,
data: {
'refreshToken': refreshToken,
'client_id': clientId,
'client_secret': clientSecret,
'redirect_uri': redirect_uri,
'resource': resource
},
dataType: 'json',
beforeSend: function (xhr) {
xhr.setRequestHeader('Access-Control-Allow-Origin', "*");
xhr.setRequestHeader('Access-Control-Allow-Methods', "*");
xhr.setRequestHeader('Access-Control-Allow-Headers', "*");
},
success: function (data, status, headers, config) {
callback(data);
},
error: function (data, status, headers, config) {
console.log('Error getting access token from Microsoft Graph: ' + status + " " + JSON.stringify(data));
}
});
You are using a wrong OAuth2 flow. You should not use the Authorization grand code flow in browser applications, because you cannot keep the client secret safe and the tokens get to the server when a browser requests the redirect URL (the tokens are not in the hash # part of the URL).
That's why Microsoft API doesn't support XHR access to the /token endpoint (by omitting the CORS response headers).
You could consider using the Implicit flow, which is designed for usage in browsers, keeps the tokens safe and doesn't require a client secret.
I am making an Ajax request to remote server and sending parameters as POST method.
But I am getting following response:
**"MLHttpRequest cannot load http://rasovai.com/mobilecontact1.php?_dc=1369189135731. Origin null is not allowed by Access-Control-Allow-Origin. "**
I read about this error and found out that it is because of CORS, so I add header to the request as follows:
Ext.Ajax.defaultHeaders = {
'Accept': 'application/json',
'Accept': 'Access-Control-Allow-Origin: *',
'Accept': 'Access-Control-Allow-Credentials: true',
'Accept': 'Access-Control-Allow-Methods: OPTIONS, GET, POST',
'Accept': 'Access-Control-Allow-Headers: Content-Type, Depth, User-Agent, X-File-Size, X-Requested-With, If-Modified-Since, X-File-Name, Cache-Control'
};
but still I am getting the same error in response.
I am able to hit the url on server, but not able to pass the parameters.
Can anyone help me in this regard?
Thanks
Ishan jain
Those headers need to be sent by the server, not the client.
If you are using Chrome browser you can use --disable-web-security flag to allow cross domain requests and if you are building this into app this will work fine. Have a look at this thread for more details : How to use json proxy to access remote services during development
If you want to pass the params to the server then you can do it as following.
Ext.Ajax.request({
url : serverURL,
jsonData : requestParams, // Object which encapsulates the request params
method : 'POST',
withCredentials: true,
useDefaultXhrHeader: false,
// List of header params can be sent as follows
headers : {
"Content-Type" : "application/json",
"Accept" : "application/json",
"Access-Control-Allow-Origin":"http://localhost:8080",
"Authorization":auth
},
username : 'mobiliser',
password : 'secret',
success : function(response) {
}
failure : function ()
{
}
As you said in your question that, the server is on a different domain, you may have to use JSONP request.
Let me know if you have any questions.
Thanks-
Gendaful