CORS - Wrong 'Access-Control-Allow-Origin' header

[hi4s]

Hey everyone,

I encount an issue when I try to simply get information about a video through this route:
[GET] https://api.twitch.tv/kraken/videos/${videoId}

Here is my request:

fetch(`https://api.twitch.tv/kraken/videos/${id}?client_id=${process.env.REACT_APP_TWITCH_CLIENT_ID}`)

This basic request return a 200 OK response but the browser blocks the request and catch the following error:
Access to fetch at 'https://api.twitch.tv/kraken/videos/000000000?client_id=XXXXXXXXXXXXXXXX' from origin 'http://localhost:3000' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

[BarryCarlyon]

I am unable to replicate the issue:

Testing from a SSL’ed and a not SSL’ed host in Chrome console with the following call:

fetch(
    'https://api.twitch.tv/kraken/videos/SOMEID',
    {
        headers: {
            'client-id': 'SOMECLIENTID'
        }
    }
)
.then(resp => { return resp.json() })
.then(resp => { console.log(resp) })
.catch(err => { console.log(err) });

Correctly fetched and logged a video Response

No CORS error occurred

[chrischung2]

I also encountered this issue.
The following is my code:

const request = new XMLHttpRequest();

request.open('GET', 'https://api.twitch.tv/kraken/streams/', true)
request.setRequestHeader('client-id', 'my-client-ID')
request.send();

and on the browser console it shows:

Access to XMLHttpRequest at 'https://api.twitch.tv/kraken/streams/' from origin 
'null' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header 
contains multiple values '*, *', but only one is allowed.

[hi4s]

Hi Chris,

I “solved” my issue by using the new twich API called helix instead of using kraken.

Twitch API

[BarryCarlyon]

As per my reply, use fetch instead as it’s working fine for me.

[Midix]

I’m working with angular 8.0.2 and i encountered this issue.

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'TwitchApp';

  constructor(private http: HttpClient){};

  ngOnInit(){
    const headers = new HttpHeaders().set('Client-ID','jcsbzv9nubttnt7i54nrqh95xht4yn');
    this.http.get('https://api.twitch.tv/kraken/streams/224975512',{headers}).subscribe((data =>{
      console.log(data);
    }));
  }
}

On the browser consoel it shows me:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.twitch.tv/kraken/streams/224975512. (Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘*, *’).

thanks

[hi4s]

I also used fetch and it didn’t work for me with latest version of Firefox, Chrome & Safari.

[hi4s]

Do you have requirements to use kraken instead of helix twitch api? Because if not, use the latest twitch api version.

[BarryCarlyon]

@hi4s

I also used fetch and it didn’t work for me with latest version of Firefox, Chrome & Safari.

Works fine from a SSl’ed host without issue. (ignoring the 400 due to bad client ID)

And heres another test using a script

Make sure your request is being made from a “true” URL over SSL.

I cannot replicate your issue. I’ve tested it two different ways and it works fine.

But if you are serving off localhost rather than a real domain that might cause an issue in some cases and doesn’t model a real host correctly.

[BarryCarlyon]

So after some digging turns out that newer ClientID’s made after a certain date have the CORS issue.

You can also try:

fetch(
    'https://api.twitch.tv/kraken/videos/SOMEID',
    {
        headers: {
            'client-id': 'SOMECLIENTID',
            'accept': 'application/vnd.twitchtv.v5+json'
        }
    }
)
.then(resp => { return resp.json() })
.then(resp => { console.log(resp) })
.catch(err => { console.log(err) });

In testing the issue occurs when you omit the V5 header when using a “new” client ID. It trips up and issues Two CORS headers