0

I am trying to fetch data from the udemy api, but get the following error:

Access to XMLHttpRequest at 'https://www.udemy.com/api-2.0/courses' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

data.service.ts

enter code here
 import { Injectable } from '@angular/core';
 import {HttpHeaders, HttpClient} from '@angular/common/http'
 import { map } from 'rxjs/operators';


 @Injectable({
  providedIn: 'root'
})
export class DataService {

 headers ={
headers:new HttpHeaders({
  Accept: "application/json, text/plain, */*",
  Authorization: 
  "Basic  xxx...x.xxxx",
  "Content-Type": "application/json;charset=utf-8"
}).set( 'Access-Control-Allow-Origin', "*")
    }
    constructor(private http:HttpClient) { }


getCourses(){
 return this.http
 .get('https://www.udemy.com/api-2.0/courses', this.headers).pipe(
   map(data => {
  //return data;
  console.log(data)
    })
   )
   }



  }

I have the access Authorization that am trying to pass in the header but still getting the error

Susan Macharia
  • 19
  • 5
  • Does this answer your question? [How to add CORS request in header in Angular 5](https://stackoverflow.com/questions/47345282/how-to-add-cors-request-in-header-in-angular-5). This is a typical error when trying to get data of an API from within an Angular app / your browser. Browsers implement a so-called same-origin-policy which prevents you from accessing data of a different origin. In your case your Angular app is running on localhost and you want to get data from https://udemy.com. Check out the link above and setup a proxy configuration - that should solve your problems. – Aljosha Koecher Dec 06 '21 at 13:42

0 Answers0