Getting Access-Control-Allow-Headers in preflight error

Question

I have created angular js app in which I have integrate twitch api , the api is

 return $http({
        url: "https://api.twitch.tv/kraken/streams",
        method: "GET",
        params: { channel: channel, limit: 1 },
        headers: { "Client-Id": "XXXXXXXXXXXXXXX" }
    })

the problem is when I reload the page the api is working but when my state changes without page reload I am getting cross origin error from this api. the error is

Failed to load https://api.twitch.tv/kraken/streams?channel=eliazOne&limit=1: Request header field RefreshToken is not allowed by Access-Control-Allow-Headers in preflight response.

anyone has idea how to resolve cross error

score 0 · Answer 1 · answered Nov 13 '17 at 08:18

0

When you make a request to a different domain this is called a cross domain request. Also known as a CORS request.

When you POST / PUT data to a different domain it will make an OPTIONS request first. This is to ensure that the server has Access-Control-Allow-Headers in place on the response. These headers should permit access to the domain you are making the request from. If these headers are not present then when the OPTIONS request is made it will fail and the POST / PUT will never be made.

See here for more info https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Preflighted_requests

The simple answer is to just add these headers to your server.

answered Nov 13 '17 at 08:18

danday74

52,471
49
232
283

but API is made by twitch developers so I can't set headers on server – Kalpesh Kashyap Nov 13 '17 at 08:52
OK fine, then you have only two options. Create your own server. Send the request to your server. Then send the request from your server to the twitch server. This is called proxying the request. The other option is to get your webserver to rewrite the request. Both options work because CORS is only enforced by browsers. – danday74 Nov 13 '17 at 09:16

score 0 · Answer 2 · answered Nov 13 '17 at 15:48

I don't know if this is something Angular does on its own by default or if it's a bug elsewhere in your code, but you or Angular is sending a RefreshToken header as part of your failing request, which is not allowed per Access-Control-Allow-Headers response header in the pre-flight OPTIONS request.

$ curl -XOPTIONS https://api.twitch.tv/kraken/streams -is | grep Headers
Access-Control-Allow-Headers: Accept, Accept-Language, Authorization, Client-Id, Twitch-Api-Token, X-Forwarded-Proto, X-Requested-With, X-Csrf-Token, Content-Type, X-Device-Id

This is something all cross-origin requests do. The browser sends an OPTIONS request to make sure the real request it's about to make is allowed by the criteria set by the cross-origin server.

score -1 · Answer 3 · answered Nov 13 '17 at 15:55

You need to add a ?callback=? with the URL you are passing along with a callback function. Please follow the link How to use JQuery to Access Twitch streams This is JQuery example but the concept is same.

$.getJSON('https://api.twitch.tv/kraken/streams/' + name + '?callback=?', 
    function(channel){
        if (channel["stream"] == null) {
            $("#all").append("<p>" + channel._links.self + "</p>");
        } 
        else {
           $("#all").append("<p>Fail</p>");   
        }
    });
});

Getting Access-Control-Allow-Headers in preflight error

3 Answers3