I've been trying a ton of things found on the internet for the past 6 hours and I can't seem to solve this.
I have a local testing Angular app, under http://tok.client
I have FrankHassanabad's OAuth2orize Recipes (https://github.com/FrankHassanabad/Oauth2orizeRecipes) under
http://localhost:3000
For the life of me, I can't make a request to the OAuth2 server for a token.
Client Side Code:
.config(function($stateProvider, $urlRouterProvider, $httpProvider) {
//Reset headers to avoid OPTIONS request (aka preflight)
$httpProvider.defaults.headers.common = {};
$httpProvider.defaults.headers.post = {};
$httpProvider.defaults.headers.put = {};
$httpProvider.defaults.headers.patch = {};
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
console.log($httpProvider.defaults.useXDomain);
console.log($httpProvider.defaults.headers.common);
})
$scope.doLogin = function() {
console.log('DUMMY - doLogin');
return $http.post('https://localhost:3000/oauth/token', 'grant_type=password&username=bob&password=secret&scope=offline_access',{
headers: {
'Authorization': 'Basic YWJjMTIzOnNzaC1zZWNyZXQ',
'Access-Control-Allow-Origin': 'https://localhost:3000',
'Accept': 'application/x-www-form-urlencoded',
'Content-Type': 'application/x-www-form-urlencoded'
}
}
)
.success(function(data, status, headers, config) {
// this callback will be called asynchronously
// when the response is available
})
.error(function(dataX, status, headersX, config) {
console.log(dataX);
console.log(status);
console.log(headersX);
console.log(config);
// called asynchronously if an error occurs
// or server returns response with an error status.
});
//fetchService();
};
Server Side Code
//Session Configuration
app.use(function(req, res, next){
res.header('Access-Control-Allow-Credentials', true);
res.header('Access-Control-Allow-Origin', req.headers.origin);
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
res.header('Access-Control-Allow-Headers', 'Access-Control-Allow-Origin, Accept, Authorization, Content-Type');
if ('OPTIONS' == req.method) {
res.send(200);
} else {
next();
}
},express.session({
secret: config.session.secret,
store: sessionStorage,
key: "authorization.sid",
cookie: {maxAge: config.session.maxAge }
}));
I tried to add all the CORS proper functioning requirements, that I could find, and it is not working.
This is the response I get in my browser: https://www.dropbox.com/s/zcujugh2m4i0xml/Screenshot%202014-03-26%2000.46.51.png
I don't even see the header I set in the provisional headers, I read a ton of articles and stackoverflow questions, I just can't figure it out.
At some point I though it was some sort of https issues, but I have https locally and the OAuth2 demo is working flawlessly, The REST Console in Chrome is also working wonderfully, only AngularJS decided to make me spend a lot of hours trying to fix this :).
What could be the issue?
