AngularJS - How to connect to Twitter application-only authentication via Oauth2?

Question

I try to receive an accessToken from the Twitter application-only authentication but I keep receiving a 405 (Method Not Allowed) response from the twitter api. Anybody knows how to solve this? I'm desperately stuck..

I am aware of the fact that:
- best practice is doing this from serverside, but I wanted to try this out with angular on client side
- X-Requested-With should be deleted from the header

This is the factory I created:

twitterServices.factory('Connect', function($http){
var factory = {};
var baseUrl = 'https://api.twitter.com/';

var bearerToken = function(){
    var consumerKey = encodeURIComponent('****');
    var consumerSecret = encodeURIComponent('****');
    var tokenCredentials = btoa(consumerKey + ':' + consumerSecret);

    return tokenCredentials;
};

factory.fetchAccessToken = function(scope){
    var oAuthurl = baseUrl + "oauth2/token";
    var headers = {
            'Authorization': 'Basic ' + bearerToken(),
            'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
        };
    $http.defaults.useXDomain = true;
    delete $http.defaults.headers.common['X-Requested-With'];
    $http({method: 'POST', url: oAuthurl, headers: headers, data: 'grant_type=client_credentials'}).
        success(function(data, status){
            scope.status = status;
            scope.data = data;
        }).
        error(function(data, status){
            scope.status = status;
            scope.data = data || "Request failed";
        });
};

factory.fetchTimeLine = function(scope){
    scope.fetchAccessToken();
    //the rest
};
return factory;
});

This is the header request/response in Chrome:

Request URL:`https://api.twitter.com/oauth2/token`
Request Method:OPTIONS
Status Code:405 Method Not Allowed
Request Headersview source
:host:api.twitter.com
:method:OPTIONS
:path:/oauth2/token
:scheme:https
:version:HTTP/1.1
accept:*/*
accept-encoding:gzip,deflate,sdch
accept-language:en-US,en;q=0.8
access-control-request-headers:accept, authorization, content-type
access-control-request-method:POST
origin:`http://localhost`
referer:`http://localhost/test/app/
user-agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.69 Safari/537.36

Response Headersview source
content-length:0
status:405 Method Not Allowed
version:HTTP/1.1

My Console shows the following:

OPTIONS https://api.twitter.com/oauth2/token 405 (Method Not Allowed) angular.js:9312
OPTIONS https://api.twitter.com/oauth2/token Origin http://localhost is not allowed by Access-Control-Allow-Origin. angular.js:9312
XMLHttpRequest cannot load https://api.twitter.com/oauth2/token. Origin http://localhost is not allowed by Access-Control-Allow-Origin. (index):1

Answer 1

Check:

Twitter :Application-only authentication error Origin null is not allowed by Access-Control-Allow-Origin

and:

https://dev.twitter.com/discussions/1291