Access TFS RESTful API from Angular web app

Question

I think TFS RESTful api has a bug. I am trying to access it using an Angular web app. Our TFS server is corporate internal. Here is my code:

        var path = 'http://tfs.mycompany.com/tfs/mycompany/_apis/wit/queries?$depth=1&$expand=all&api-version=2.2';
        var config = {  withCredentials: true };
        $http.get(path, config)
        .then(function (response) {
            $scope.resultList = response.data.d.results || [ response.data.d ];
            $scope.message = 'Found ' + $scope.resultList.length + ' item' + ($scope.resultList.length == 1 ? '':'s');
        }, function (response) {
            $scope.resultList = [];
            $scope.message = 'Error ' + response.status + ' ' + JSON.stringify(response.data);
        });

The request goes to the server, and the server responds with OK 200. However, the browser (Chrome) blocks the data, and tells me:

A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' header 
when the credentials flag is true. Origin 'http://localhost' is therefore 
not allowed access. The credentials mode of an XMLHttpRequest is controlled 
by the withCredentials attribute.

The request headers have Origin:http://localhost

The response headers have Access-Control-Allow-Origin:*

Is there any way for me to tell TFS to not return * in the Access-Control-Allow-Origin? This seems like a serious bug in TFS, which renders the RESTful api practically useless for web apps!

score 0 · Answer 1 · answered Jun 15 '16 at 09:33

You may check Cross-origin resource sharing (CORS) example below to add Authorization in your code:

$( document ).ready(function() {
    $.ajax({
        url: 'https://fabrikam.visualstudio.com/defaultcollection/_apis/projects?api-version=1.0',
        dataType: 'json',
        headers: {
            'Authorization': 'Basic ' + btoa("" + ":" + myPatToken)
        }
    }).done(function( results ) {
        console.log( results.value[0].id + " " + results.value[0].name );
    });
});

Also, check this case to see whether it is helpful:

AJAX cross domain issue with Visual Studio Online REST API

Access TFS RESTful API from Angular web app

1 Answers1