时间戳

首页 > 解决方案 > CORS 问题 - Angular / PHP / Apache

javascript - CORS 问题 - Angular / PHP / Apache

问题描述

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

我无法使用 Angular 在我的服务器（Apache 和 PHP）上使用 POST 发出请求。

我将 angular/cli v.6.2.1 与节点 10、apache 2.4 和 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 向我展示的内容：

在此处输入图像描述

我可以在网络选项卡中看到这个：

在此处输入图像描述

响应选项卡显示一个完全空的框。

我可以从我的 http.post 中删除自定义标头的部分，它不会改变任何内容。

对我来说似乎很奇怪的是，我可以单击 FireFox 编辑和重新发送按钮，而无需更改任何内容，并且出现了正确的结果......

感谢阅读/帮助

标签： javascriptphpangularcorsxmlhttprequest

解决方案

首先你需要修复你的 POST 数据；您在 Object 语法周围有方括号。

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

接下来，您需要添加适当的标头并设置 PHP 以处理 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);

这对我有用。

推荐阅读