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

[Brigette-Eckert]

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);	
		})

	};
}])

[3ventic]

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

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

[DallasNChains]

$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.

[Brigette-Eckert]

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?

[3ventic]

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.