Angular2 Firebase : Response for preflight has invalid HTTP status code 405

Viewed 568

I am new to Angular2. While trying to get the values from Firebase API , I am getting below Error:

OPTIONS https://udemy-ng-http.firebaseio.com/data 405 (Method Not Allowed)

Failed to load https://udemy-ng-http.firebaseio.com/data: Response for preflight has 

invalid HTTP status code 405

But I am able to post the data to Firebase API Endpoint.

I also tried other solutions provided on this community but it did not help. Below is my code.

Code:

 getServer(){
    let headers = new Headers();
    headers.append('Access-Control-Allow-Headers', 'Content-Type');
    headers.append('Access-Control-Allow-Origin', '*');
    headers.append('Content-Type', 'application/json') ;
    headers.append('charset','UTF-8');
    headers.append('Accept','application/json');
    let options = new RequestOptions({ headers: headers });

    return this.http.get('https://udemy-ng-http.firebaseio.com/data',options)
        .map(
            (response: Response) => {
                const data = response.json();
                for (const server of data) {
                  server.name = 'FETCHED_' + server.name;
                }
                return data;
            }
        )
        .catch(
            (error: Response) => {
              return Observable.throw('Something went wrong');
            }
        );
}
2 Answers

You need to add .json to your endpoint. Try hitting https://udemy-ng-http.firebaseio.com/data.json. It gives 404. You can try hitting the one you created. Please have a look on the plunk I created.

https://plnkr.co/edit/ZTZ9QXsDWRlvboPh2OEu?p=preview

let _url = 'https://irelief-3ff8d.firebaseio.com/bookings.json';
    //https://udemy-ng-http.firebaseio.com/data
     this.http.get(_url, { headers: headers }).subscribe((response)=>{
      alert('response >> '+JSON.stringify(response));
      this.responseData = response;
    },err => alert('status : '+err.status)));

You need to replace the url with your own app. Hope this helps.

P.S. I am using angular version 4.4.6 for this example.

Related