CORS问题-Angular / PHP / Apache [英] CORS Issue - Angular / PHP / Apache

问题描述

我认为互联网上到处都有很多类似的话题，但是我只花了1小时的搜索时间，仍然无法解决这个问题。

我

我无法将Angular / cli v.6.2.1与节点10，apache 2.4和amp一起使用Angular在服务器（Apache& PHP）上用POST发出请求。 ; php 7.1

这是Http调用中的简单代码（HttpClient和HttpHeaders都来自@ angular / common / http）：

  constructor（private http：HttpClient）{} 
 
 this.http.post（'http：//localhost/distributor.php' ，['prop1'：'value1'，'prop2'：'value2']，{headers：new HttpHeaders（）。set（'Access-Control-Allow-Origin'，'*'）}）。subscribe（
 data => {
 console.log（data）; 
}，
 err => {
 console.log（'error'）; 
 }）; 
  

}

我只是尝试发送这样从PHP返回的内容：

 <？php 
 $ data = $ _POST; 
 echo json_encode（$ data）; 
  

我已经允许apache配置文件中的所有源。
Firefox& Chrome只是在 OPTIONS预检后让我失望，并且什么也不做，没有从PHP文件返回。

这是FireFox向我显示的内容：

，我可以在网络标签中看到此内容：

响应标签显示一个完全为空的框。 / p>

我可以从http.post中删除自定义标头的部分，它什么都不会改变。

对我来说似乎很奇怪我可以点击FireFox编辑和重新发送按钮，不做任何更改，就会出现正确的结果...

感谢阅读/帮助

解决方案

首先，您需要修复POST数据；

  const data = {'prop1'：'value1'，'prop2'：'value2 '}; 
 this.http.post（'http：//localhost/distributor.php'，数据）.subscribe（
答复=> {
 console.log（reply）; 
}，
 err => {
 console.log（'error'，err）; 
}）; 
  

接下来，您需要添加适当的标头并设置PHP以处理JSON：

 <？php 
标头（'Access-Control-Allow-Headers：Access-Control-Allow-Origin，Content-Type '）; 
标头（ Access-Control-Allow-Origin：*）； 
标头（ Content-Type：应用程序/ json，charset = utf-8）； 
 
 //抓取Angular发送的JSON数据
 $ data = json_decode（file_get_contents（’php：// input’），true）; 
 //添加数字数据
 $ data [ prop3] = 3; 
 //回复
 echo json_encode（$ data，JSON_UNESCAPED_UNICODE | JSON_NUMERIC_CHECK）; 
  

这对我有用。

I think that there are plenty of similar topics here and there on the internet, but I did just spend 1h searching and still can't fix this.

I cannot make a request with POST on my server (Apache & PHP) with Angular.

I use angular/cli v.6.2.1 with node 10, apache 2.4 & php 7.1

Here is a simple code from the Http call (HttpClient & HttpHeaders both come from @angular/common/http) :

constructor(private http: HttpClient){}

this.http.post('http://localhost/distributor.php', ['prop1':'value1', 'prop2':'value2'], {headers: new HttpHeaders().set('Access-Control-Allow-Origin','*')}).subscribe(
data => {
    console.log(data);
},
err => {
    console.log('error');
});

}

I just try to send something back from PHP this way :

<?php
    $data = $_POST;
    echo json_encode($data);

I already allowed all origins in apache configuration file. Both Firefox & Chrome just let me down after a "OPTIONS" preflight and do not do anything else, no return from the PHP file.

Here is what FireFox shows me :

and I can see this in the network tab :

Response tab shows a completely empty box.

I can remove the custom header's part from my http.post it changes nothing.

What seems strange to me is that I can click the FireFox edit & resend button, without changing nothing, and the right results appear...

Thanks for reading/help

解决方案

First you need to fix your POST data; you have square brackets around Object syntax.

const data = { 'prop1': 'value1', 'prop2': 'value2' };
this.http.post('http://localhost/distributor.php', data).subscribe(
  reply => {
    console.log(reply);
  },
  err => {
    console.log('error', err);
  });

Next, you need to add proper headers and set PHP up to deal with JSON:

<?php
header('Access-Control-Allow-Headers: Access-Control-Allow-Origin, Content-Type');
header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json, charset=utf-8');

// grab JSON data sent by Angular
$data = json_decode(file_get_contents('php://input'), true);
// add numeric data
$data["prop3"] = 3;
// reply
echo json_encode($data, JSON_UNESCAPED_UNICODE | JSON_NUMERIC_CHECK);

This worked for me.

这篇关于CORS问题-Angular / PHP / Apache的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！