-2

I'm sending a request to an external api and the above error is displayed

Here's my Ts

import { Component, OnInit } from '@angular/core';
import {  HttpClient, HttpHeaders } from '@angular/common/http';
@Component({
  selector: 'app-standings',
  templateUrl: './standings.component.html',
  styleUrls: ['./standings.component.css']
})

export class StandingsComponent implements OnInit {
 headers = new HttpHeaders();
  url1: any;
  constructor(private http: HttpClient) { 
  this.headers.append('X-RapidAPI-Key', 'myKey');
this.url1 = 'https://api.football-data.org/v2/competitions/SA/scorers';
  }
  getStandings() {
   return this.http.get(this.url1,{headers: this.headers})
        .subscribe(response => console.log(response))
}

  ngOnInit(): void {
    this.getStandings()
  }

}

I've tried to add 'Access-Control-Allow-Origin': '*' to the Httpheaders constructor but i also get errors ,

I've also tried to create a proxy configuration file and added it into angular.json but still the error existed

Help please !

Patiee
  • 125
  • 1
  • 10
  • Does this answer your question? [Why does my JavaScript code receive a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error, while Postman does not?](https://stackoverflow.com/questions/20035101/why-does-my-javascript-code-receive-a-no-access-control-allow-origin-header-i) – Ivar Nov 10 '21 at 09:19
  • Also relevant: [No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API](https://stackoverflow.com/questions/43871637/no-access-control-allow-origin-header-is-present-on-the-requested-resource-whe) – Ivar Nov 10 '21 at 09:19
  • I'm kinda new to angular and these explained using Vanilla js fetch – Patiee Nov 10 '21 at 09:28
  • It doesn't really have anything todo with the language _you_ are using. It is the server that you make the request to that needs to _respond_ with that header. JavaScript or Angular have no control over that (that would defeat the purpose of it). The two links I posted explain this and how to get around it. – Ivar Nov 10 '21 at 09:45

1 Answers1

-1

I believe you're making a request to a different domain that's why the browser is not allowing it due to same-origin security. This is known as CORS.

But there are still some ways using which you can make a request to a different domain. Open network tab in your browser and look for Access-Control-Allow-Origin header in the response body, it must be missing.

Read more about CORS.

Pratham
  • 497
  • 3
  • 7