Angular 4 Typescript http post请求不起作用答案

【问题标题】：Angular 4 Typescript http post request not workingAngular 4 Typescript http post请求不起作用
【发布时间】：2017-06-04 14:56:52
【问题描述】：

我正在尝试通过向服务器上的 php 文件发出 http post 请求来为我的班级项目制作一个有效的联系表。我知道 php 文件有效，因为当我直接路由到它时，它会 ping 我的电子邮件，当我在浏览器中调试时，我可以看到它正在尝试构建 http 请求。我遇到的问题是我真的不明白我在做什么。我希望有人能告诉我我的代码有什么问题或指出我正确的方向。任何帮助将不胜感激......这是我到目前为止所拥有的：

headers = {
    'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
}

data = {
    name:'name',
    phone:'555-5555',
    email:'email@gmail.com',
    message:'hello'
}

constructor(private http: Http) { }

postData() {
    console.log(this.data);
    this.http.post('http://mywebsite.net/contact_me.php', 
this.data, this.headers);
}

【问题讨论】：

您的服务器脚本是否支持 CORS 请求？换句话说，是否启用了 CORS？
订阅后请在console.log中发布成功、失败及功能齐全
对不起，我真的不知道如何记录这些功能。当我记录结果时，出现以下错误：XMLHttpRequest cannot load mywebsite.net/contact_me.php。对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许访问 Origin 'localhost:4200'。

标签： php angular typescript http-post

【解决方案1】：

我也遇到过这个问题

step1 在php文件中设置Headers

header("Access-Control-Allow-Origin: *");

header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");

获取响应的示例函数

   public function createAction(Request $request) {

    $data=file_get_contents('php://input');

    var_dump($data);//here you print you 'POST' or 'GET' Response.

step2 service.ts formService.ts

 private headers = new Headers({'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'});

 private insertdataUrl = 'api-url';

 //create function that is called by component.html file
  create(user: ApiDashboard) {
   return this.http.post(this.insertdataUrl,user).map(response => response.json());

   }
  //here in my code ApiDashboard is model

step3 在 component.ts 文件中定义你的服务功能

export class ApiDashboardformComponent implements OnInit {
model: any = {};
 loading = false;
  constructor(private router: Router,
    private formService: FormService
    ) { }

 ngOnInit() {
 }
Create() {
    this.loading = true;
        this.formService.create(this.model)
        .subscribe(
            data => {
                this.formService.success('Registration successful', true);
                this.router.navigate(['/material-dashboard']);
            },
            error => {
                this.formService.error(error);
                this.loading = false;
            });
      }
     }

step4最后调用create()函数component.html文件

 <div class="col-md-6 col-md-offset-3">
  <h2>Register</h2>
  <form name="form" (ngSubmit)="f.form.valid && Create()" #f="ngForm" novalidate>

【讨论】：

【解决方案2】：

将此添加到我的 php 文件中：

header("Access-Control-Allow-Origin: http://localhost:4200");

并将我的身体参数更新为：

JSON.stringify(this.data)

我的标头参数返回为“未定义”仍然存在问题，但这至少足以用空消息 ping 我的电子邮件。谢谢您的帮助！

【讨论】：