Ошибка CORS и Bad Request при доступе к PHP API через приложение Angular

Question

Я пытаюсь вызвать конечную точку API, написанную на PHP, из приложения Angular 7, используя http.post. Тем не менее, я продолжаю получать сообщение об ошибке, которое сбило меня с толку и другого разработчика.

Ошибка в два раза. Я получаю 400 (неправильный запрос), за которым следует ошибка CORS, но в этот момент я считаю, что ошибка CORS - это красная сельдь. Я думаю, что проблема заключается в неправильном запросе, и, скорее всего, это связано с тем, как я делаю запрос.

Конечная точка работает, если я позвоню ей с Почтальоном, и мы создали отдельный сайт PHP, чтобы попытаться получить доступ к конечной точке, и это прекрасно работает. Так что это явно угловой код.

Вот файл PHP для конечной точки API:

// 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));
}
?>

А вот угловой код, вызывающий конечную точку:

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

Myдумаю, проблема связана с тем, как я отправляю поверх тела запроса или заголовков. Все, что я знаю, это то, что если бы у меня были волосы, я бы все это уже вытащил.

Answer 1

причина, по которой вы не испытываете ошибку с POSTMan, заключается в том, что в Angular вы выполняете вызов XHR (XMLHTTPREQUEST) (на основе ajax), XMLHTTPREQUEST не допускаются между кросс-источниками (угловой проект и проект PHP имеетразличного происхождения). поэтому нужно CORS configularion на стороне сервера.

извините но я приведу пример в ядре .net. (нужен пакет Cors Nuget для ядра .net). я верю, что вы можете отразить этот пример в PHP:)

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