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

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.

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

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.

Hi Chris,

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

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

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

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

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

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.

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

1 Like

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