-1

Anyone to help me in my new Angular 4 Project using HTTP request to GET, POST and PUT data using restful APIs.

I managed to GET my data from the API but when I try to POST or PUT it always returns with 

OPTIONS http://pencil-designs.com/codeigniter/index.php/api/Orphans/add_orphan 405 (Method Not Allowed)

XMLHttpRequest cannot load http://pencil-designs.com/codeigniter/index.php/api/Orphans/add_orphan. Response for preflight has invalid HTTP status code 405

Response {_body: ProgressEvent, status: 0, ok: false, statusText: "", headers: Headers…}

Here is my service code

import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http'
import 'rxjs/Rx';

@Injectable()
export class OrphansService {
  constructor(private http : Http) { }
    private headers = new Headers({
      'Content-Type' : 'application/json',
      'Access-Control-Allow-Origin' : '*',
      'Access-Control-Allow-Methods' : 'GET,PUT,POST,DELETE',
      'Access-Control-Allow-Headers' : 'Content-Type'
    })

// Get all Orphans
  getAllOrphans(){
    return this.http.get('http://pencil-designs.com/codeigniter/index.php/api/Orphans/getAllOrphans3').map(res => res.json());
  }
  


// Delete an orphan
  deleteOrphanApi(orphan_id){
    return this.http.put('http://pencil-designs.com/codeigniter/index.php/api/Orphans/update_orphan?orphan_id=' + orphan_id, {headers:this.headers})
    }



// Add New Orphan
  addOrphanApi(orphan){
    return this.http.post('http://pencil-designs.com/codeigniter/index.php/api/Orphans/add_orphan', orphan, {headers:this.headers}).map(res => res.json());
  }

}

I tried many solutions to send headers, I really don't know where the problem is, my code or server configuration or maybe the APIs.

This is the link to the online app http://pencil-designs.com/cpms-app/

I'm stuck on this and going into infinite loop, any help please!!!

Sabry Muhamad
  • 1
  • 2
  • the api doesn't allow the `OPTIONS` method. With you delete request, you could use the `delete` method too. – sheplu Aug 03 '17 at 16:22
  • Can you use a tool like Advanced REST client to PUT or POST a test body to your server endpoints? – Hodglem Aug 03 '17 at 16:22
  • @Hodglem — What good would that do? It's the OPTIONS request it is failing on. – Quentin Aug 03 '17 at 16:28
  • If you mean a tool to test my APIs like "postman". Yes I tested my APIs and all returned with "success" – Sabry Muhamad Aug 03 '17 at 16:28
  • Possible duplicate of [XMLHttpRequest cannot load https://www.\[website\].com/](https://stackoverflow.com/questions/35553500/xmlhttprequest-cannot-load-https-www-website-com) – Quentin Aug 03 '17 at 16:28
  • @Quentin Based on OP 405 is being returned. Verifying the endpoint accepts a request independent of the Angular call would isolate the problem. – Hodglem Aug 03 '17 at 16:30

1 Answers1

0

Since you are sending requests to different domain, you should allow Cross Origin Resource Sharing (CORS) in Your API.

You don't have to set headers in your JS code as this is something the browser does automatically and send a fligh request with the type "OPTIONS" to see if CORS is enabled or not and if your site's domain is allowed or not.

in your PHP code, you should send the following response headers 

'Access-Control-Allow-Origin' : '*',
'Access-Control-Allow-Methods' : 'GET,PUT,POST,DELETE',

It is not recommended to allow all origins though, just put your site name

Haitham Shaddad
  • 4,336
  • 2
  • 14
  • 19