Setting Client_ID with $http.get() (Angular 1)

I am updating an old project using the twitch API since it has since broken and having trouble with the AJAX call in AngularJS 1.

How do you set up the header for Client_ID? I have tired both

$http.defaults.headers.common['Client_ID'] = "xxxxx" This returns: Request header filed Client_ID is not allowed by Access-Control–Allow-Headers in preflight response

and



How do I properly set this header? My full code is below.

angular.module('twitchStatusApp', [])

.controller('mainCtrl', ['$scope', '$http', function($scope, $http){
    $scope.clientID = config.clientID;
    $http.defaults.headers.common['Accept'] = " application/vnd.twitchtv.v5+json";
    $http.defaults.headers.common['Client_ID'] = 'xxxxx";
	$scope.twitchUsers = ["freecodecamp", "EtchTheSketch", "SoXvicious", "Dexteritybonus", "patrickrothfuss", "FeliciaDay", "ShaBooZey", "Monstercat", "TotalBiscuit", "Crendor", "comster404", "brunofin"];
	$scope.userData =[];


	for(i=0; i < $scope.twitchUsers.length; i++){
		$scope.user = $scope.twitchUsers[i];
		$http.get("https://api.twitch.tv/kraken/streams/" + $scope.user).success(function(data){
			if(data.stream == null){
				console.log("offline")
				$http.get(data._links.channel).success(function(info){
					// console.log(info);
					var name = info.display_name;
					var avatar = info.logo;
					var game = "Offline";
					var status = "Offline";
					var userInfo = {name: name , game: game, avatar: avatar, status: status}
					// $scope.userData.push(userInfo);
				    // console.log($scope.userData);
				})
			} else {
				var channel = data.stream.channel;
				var name = channel.display_name;
				var game = channel.game;
				var avatar = channel.logo;
				var status = "Online";
				var userInfo = {name: name , game: game, avatar: avatar, status: status}
			    $scope.userData.push(userInfo);	
			    // console.log($scope.userData);
			}
		}).error(function(error){
			console.log(error)
			var name = error.message.split("'")[1];
			console.log("name " + name);
			var avatar = "img/notwitch.png";
			var game = "No Account";
			var status = "Offline";
			var userInfo = {name: name , game: game, avatar: avatar, status: status}
			$scope.userData.push(userInfo);	
			// console.log($scope.userData);	
		})

	};
}])






Sure you didn’t typo it in the code when trying it out?

The Access-Control-Allow-Headers header returned definitely contains Client-Id.

1 Like

$http.defaults.headers.common['Client_ID'] = 'xxxxx";

I’m not super familiar with Angular, but our header is called Client-ID. It has a dash and not an underscore in it.

2 Likes

Thanks that helps. But now am getting an error saying: “The parameter “id” was malformed: the value must match the regular expression /^[0-9]+$/”" my key for the project from twtich has letters and numbers. Do I need to ask for a different Client_ID?

That’s not an issue with your Client ID; it’s an issue with your URL. You’re requesting /kraken/streams/:username on v5, which expects the user ID instead, not username.

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.