title: Angular 4 restful API "PUT" and "POST" Methods
body: <p>Anyone to help me in my new Angular 4 Project using HTTP request to GET, POST and PUT data using restful APIs.</p>
  
  <p>I managed to GET my data from the API but when I try to POST or PUT it  always returns with </p>
  
  <pre><code>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…}
  </code></pre>
  
  <p>Here is my service code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><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 =&gt; 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 =&gt; res.json());
    }
  
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>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.</p>
  
  <p>This is the link to the online app
  <a href="http://pencil-designs.com/cpms-app/" rel="nofollow noreferrer">http://pencil-designs.com/cpms-app/</a></p>
  
  <p>I'm stuck on this and going into infinite loop, any help please!!!</p>