Getting error on making http request to an api using angular

Question

I'm making an angular web app where I'm making HTTP requests to an API hosted on Firebase to fetch data using post request but I'm getting the following error when the page loads

Failed to load https://chat-f0225.firebaseapp.com/: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access

Here is my code

user.service.ts

import { Injectable } from '@angular/core';
import { User } from '../model/User';
import { Methods } from '../model/Method';
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/Observable/of';
import {  HttpClient , HttpHeaders } from '@angular/common/http'
@Injectable()
export class UserService {
  tickets:User[];
  method:Methods;
  postUrl = 'https://chat-f0225.firebaseapp.com'
  data:Observable<any>;
  httpOptions = {
    headers : new HttpHeaders({'Content-Type':'application/json',
    'Access-Control-Allow-Origin': '*'})
  };
  constructor(private http: HttpClient) { }
  getTickets(method:Methods):Observable<User[]>
  {
    return this.http.post<User[]>(this.postUrl,method,this.httpOptions);
  }
}

User.component.ts

import { Component , OnInit} from '@angular/core';
import { User} from '../../model/User';
import { UserService } from '../../services/user.service';
import { Methods } from '../../model/Method';
@Component({
    selector : 'app-user',
   templateUrl : './user.component.html',
   styleUrls : ['./user.component.css'],
})

export class UserComponent implements OnInit{
    //Properties
    tickets : User[];
    method:Methods;

    constructor(private userService: UserService)
    {
    }
    ngOnInit()
    {
        this.method={name:"FetchTickets",userId:"dke1kor"};
        console.log("here");

        this.userService.getTickets(this.method as Methods).subscribe(ticket =>{
            console.log(ticket);

        })
    }
}

How do I access that API?

what data?I'm passing method to that function which will be the post data — alia
– alia, Commented Apr 9, 2018 at 18:00
why are you trying to fetch data from http.post? if you want to fetch data from server so you have to use http.get method — Fahad Subzwari
– Fahad Subzwari, Commented Apr 9, 2018 at 18:01
Because that api demands so...It will return back the data for that user and then also add that user to that database — alia
– alia, Commented Apr 9, 2018 at 18:05

fastr.de · Accepted Answer · 2018-04-09 18:10:50Z

1

You run into an issue with CORS. CORS has to be handled properly at server-side. The Server must send an 'Access-Control-Allow-Origin' where the accessing hosts are whitelisted or * for all Hosts.

see https://enable-cors.org/ for further details.

answered Apr 9, 2018 at 18:10

fastr.de

1,52314 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Getting error on making http request to an api using angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related