[Error] "Request header field Client-ID is not allowed by Access-Control-Allow-Headers in preflight response."

[camilafalk]

I have a page on my website with a stream list, and I’m having a problem with my client ID.

I’m really new to the jQuery/javascript so I just know the basics. I created an Client ID and added the header to my jquery function, but im getting this error:

“Request header field Client-ID is not allowed by Access-Control-Allow-Headers in preflight response.”

My code is:

jQuery(document).ready(function () {
jQuery.ajaxSetup({
headers: {
‘Client-ID’: ‘myclientidhere’,
‘Content-Type’ : ‘application/x-www-form-urlencoded; charset=UTF-8’,
“Access-Control-Allow-Origin” : “*”,
“Access-Control-Allow-Methods” : “GET,POST,PUT,DELETE,OPTIONS”,
“Access-Control-Allow-Headers”: “Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With”
}
});
jQuery(’.ltwitch’).each(function () {
var tnick = jQuery(this).data(‘tnick’);
var span = jQuery(this);
jQuery.getJSON(“https://api.twitch.tv/kraken/streams/” + tnick, function © {

        if (c.stream == null) {
            span.removeClass("online");
        } else {
            span.addClass("online");
        }
    });
});

});

Can someone please tell me how to fix it? I would be really grateful!

[DallasNChains]

You’re getting the error because ajaxSetup applies to every AJAX call once you’ve turned it on. With an AJAX request, the browser sends a preflight OPTIONS call to the server. In this case, the server is saying that it doesn’t allow the Client-ID header for the OPTIONS call.

Is there a particular reason you are calling ajaxSetup and setting all of those particular headers? It’s generally not needed. Also, there is a copy and pasteable jQuery example in the original Client-ID blog post.

[camilafalk]

So, instead of ajaxSetup should I just use ajax, like the example? Now my code looks like this, but I’m receiving 400 (Bad Request).

jQuery(document).ready(function () {
jQuery.ajax({
type: ‘GET’,
url: ‘https://api.twitch.tv/kraken/streams’,
headers: {
‘Client-ID’: ‘xxx’
}
});
jQuery(’.ltwitch’).each(function () {
var tnick = jQuery(this).data(‘tnick’);
var span = jQuery(this);
jQuery.getJSON(“https://api.twitch.tv/kraken/streams/” + tnick, function © {

        if (c.stream == null) {
            span.removeClass("online");
        } else {
            span.addClass("online");
        }
    });
});

});

Can you show me an example of how can I add the headers on a proper way, on my code? (I really just know the basic off jQuery )

[DallasNChains]

getJSON doesn’t allow you to set headers on a request, which is why I suggested the code in the blog post.

You need to replace jQuery.getJSON with the jQuery.ajax call. You’re calling both right now, and you’re seeing the 400 due to jQuery.getJSON failing. You new code would look like this:

jQuery.ajax({
   type: 'GET',
   url: 'https://api.twitch.tv/kraken/streams' + tnick,
   headers: {
     'Client-ID': 'xxx'
   },
   success: function(c){
      if (c.stream == null) {
        span.removeClass("online");
      } else {
        span.addClass("online");
      }
   }
});

[Muddr]

@camilafalk

url: ‘https://api.twitch.tv/kraken/streams’ + tnick,

One thing that stands out is it needs a / after streams

url: ‘https://api.twitch.tv/kraken/streams/’ + tnick,

[camilafalk]

Thank you! I didn’t noticed that, but the problem stays even after I used the ‘/’ after streams I really don’t know what to do about this error

[Muddr]

I’m not real sure. I pasted this into Chrome’s console on a site and localhost that I know both has JQuery and it works fine.

tnick = 'muddr';
jQuery.ajax({
	type: 'GET',
	url: 'https://api.twitch.tv/kraken/streams/' + tnick,
	headers: {
		'Client-ID': 'xxxxxxxxx'
	},
	success: function (c) {
		console.log(c);
	}
});
Object {readyState: 1}
Object {stream: null, _links: Object}

[3ventic]

Why are you setting the Access-Control-Allow-* headers in your ajaxSetup? They’re headers for a server to return, not for a client to send, and it’s likely the cause of your error.

[DallasNChains]

I would remove ajaxSetup from your code completely. It isn’t necessary to interact with the Twitch API.

[camilafalk]

So, turn’s out that it was a problem with my host provider, they solved it and now its okay! Thank you guys for the help