时间戳

首页 > 解决方案 > 使用 Angular 应用程序访问 PHP API 时出现 CORS 和错误请求错误

php - 使用 Angular 应用程序访问 PHP API 时出现 CORS 和错误请求错误

问题描述

我正在尝试使用 http.post 从 Angular 7 应用程序调用用 PHP 编写的 API 端点。但是，我不断收到一个错误，这让我和另一位开发人员感到困惑。

错误是双重的。我收到一个 400（错误请求），然后是一个 CORS 错误，但此时我认为 CORS 错误是一个红鲱鱼。我认为错误的请求错误是问题所在，这可能与我提出请求的方式有关。

如果我用 Postman 调用端点，它就可以工作，我们创建了一个单独的 PHP 站点来尝试访问端点，并且工作正常。所以它显然是 Angular 代码。

这是 API 端点的 PHP 文件：

// required headers
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
header("Access-Control-Allow-Methods: POST, OPTIONS");
header("Access-Control-Max-Age: 3600");
header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");

...

//get posted data
$data = json_decode(file_get_contents("php://input"));

if(!empty($data->searchby)){
    $criteria = $data->searchby;

...

        // set response code - 200 OK
        http_response_code(200);

        // show people data in json format
        echo json_encode($people);
    }
    else{
        // set response code - 404 Not found
        http_response_code(404);

        // tell the user no people found
        echo json_encode(
            array("message" => "No people found.")
        );
    }
}
// tell the user data is incomplete
else{
    // set response code - 400 bad request
    http_response_code(404);

    // tell the user
    echo json_encode(array("message" => "Failed - Missing Search Criteria", "data" => $data));
}
?>

这是调用端点的 Angular 代码：

    let options = { headers: new HttpHeaders().set('Content-Type', 'application/json') };

    let body = { 
      "searchby": "id",
      "id": "2",
      "email": " "
    }

    this.http.post(this.baseUrl + 'person/inq.php', body, options).subscribe(data => {
      console.log(data);
    })
  }

我的猜测是问题与我如何通过请求正文或标头发送有关。我所知道的是，如果我有头发，我现在已经把它全部拔掉了。

标签： phpangular

解决方案

您没有遇到 POSTMan 错误的原因是，在 Angular 中，您正在执行 XHR (XMLHTTPREQUEST) 调用（基于 ajax），跨域之间不允许 XMLHTTPREQUEST （角度项目和 PHP 项目有不同的起源） . 所以需要在服务器端进行 CORS 配置。

抱歉，我将在.net core 中举一个例子。（需要 .net 核心的 cors nuget 包）。我相信您可以将此示例反映到 PHP 中：)

 app.UseCors(x => x.AllowAnyHeader()
.AllowAnyMethod()
.WithOrigins("http://localhost:4200") //for development only (angular origin)
.AllowCredentials());

推荐阅读