Angular 4 restful API“PUT”和“POST”方法

时间:2017-08-03 16:19:09

标签: angular rest post put angular-http

任何人都可以使用Restful API使用HTTP请求来帮助我使用GET,POST和PUT数据进行新的Angular 4项目。

我设法从API中获取数据,但是当我尝试POST或PUT时,它总是返回

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…}

这是我的服务代码

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());
  }

}

我尝试了很多解决方案来发送标头,我真的不知道问题出在哪里,我的代码或服务器配置还是API。

这是在线应用的链接 http://pencil-designs.com/cpms-app/

我坚持这个并进入无限循环,请帮助!!!

1 个答案:

答案 0 :(得分:0)

由于您要向不同的域发送请求,因此应在您的API中允许跨源资源共享(CORS)。

您不必在JS代码中设置标题,因为这是浏览器自动执行的操作,并发送带有“OPTIONS”类型的fligh请求,以查看是否启用了CORS以及是否允许您的网站域名或不

在PHP代码中,您应该发送以下响应标头

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

不建议允许所有来源,只需输入您的网站名称