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.
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.
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 â*, *â).