POST-запрос с использованием Angular HttpClient не работает

Question

Я пытаюсь опубликовать пользовательские данные в PHP RESTful API из моего ионного приложения. Я пытался найти решение, но не помогло. Я создал провайдер, содержащий функцию, а именно «onSignup (signupForm)», которая вызывается при нажатии кнопки.

Код выглядит следующим образом:

signup(username: string,email: string,password: string): void {

let headers = new HttpHeaders();
headers = headers.set("Content-Type","application/json; charset=UTF-8");
let body= {
  name:username, email:email, password:password
};

this.http.post('http://www.something.com/register', JSON.stringify(body), 
{headers: headers})
.subscribe(data => {
  console.log(data);
});
this.storage.set(this.HAS_LOGGED_IN, true);
this.setUsername(username);
this.events.publish('user:signup');
};

Код для API:

<?php
header("Access-Control-Allow-Origin:*");
header("Content-Type: application/json; charset=UTF-8");
require_once '../include/DbHandler.php';
require_once '../include/PassHash.php';
require '.././libs/Slim/Slim.php';

\Slim\Slim::registerAutoloader();

$app = new \Slim\Slim();

/**
* ----------- METHODS WITHOUT AUTHENTICATION ------------------------------- 
     --
     */
     /**
      * User Registration
      * url - /register
      * method - POST
      * params - name, email, password
      */
    $app->post('/register', function() use ($app) {
       file_put_contents("logs.txt","/register Route has been visited");

       // check for required params
       verifyRequiredParams(array('name', 'email', 'password'));

       $response = array();


       // reading post params
       $name = $app->request->post('name');
       $email = $app->request->post('email');
       $password = $app->request->post('password');

       // validating email address
       validateEmail($email);

       $db = new DbHandler();
       $res = $db->createUser($name, $email, $password);

       if ($res == USER_CREATED_SUCCESSFULLY) {
           $response["error"] = false;
           $response["message"] = "You are successfully registered";
       } else if ($res == USER_CREATE_FAILED) {
           $response["error"] = true;
           $response["message"] = "Oops! An error occurred while registereing";
       } else if ($res == USER_ALREADY_EXISTED) {
           $response["error"] = true;
           $response["message"] = "Sorry, this email already existed";
       }
       // echo json response
       echoRespnse(201, $response);
   });

Я получаю ошибку

1. Не удалось загрузить ресурс: сервер ответил с состоянием 404 (не найдено).

2. Не удалось загрузить http://www.something.com/register: Ответ на предпечатную проверку имеет недопустимый код состояния HTTP 404

Этот API отлично работает в Postman, но сталкивается с проблемой при запуске приложения в Chrome.

Что-то мне не хватает в API или во время POST-вызова?

Пожалуйста, помогите. Заранее спасибо.

Edit:

Я добавил скриншот вкладки сети. Это то, что я получаю в своих заголовках запросов и ответов. Я предполагаю, что в этих двух заголовках может быть несоответствие, и определенно это не может быть проблемой с CORS, потому что я могу делать вызовы GET без каких-либо проблем с CORS.

Добавлен скриншот вкладки консоли с ошибками:

Answer 1

попробуйте

header('Access-Control-Allow-Origin: *'); 
$dados = file_get_contents('php://input');

вы получите JSON из вашего углового запроса ...

Answer 2

Так как это работает от Почтальона, но не от вашего приложения, я бы внимательно посмотрел на CORS. Вам нужно установить заголовки при поступлении запроса, для почтовых запросов Angular HttpClient отправит запрос OPTIONS.

Я не часто использую PHP, но, может быть, что-то подобное будет работать

if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    header('Access-Control-Allow-Origin: *');
    header('Access-Control-Allow-Methods: POST, OPTIONS');
    header('Access-Control-Allow-Headers: Content-Type');
    header('Content-Length: 0');
    header('Content-Type: application/json');
    die();
}

Редактировать: Поскольку вы используете Slim Framework, я предполагаю, что ваш код. Вы можете обращаться с запросами OPTIONS, как описано в документации Slim Framework v2 (не уверен, какую версию вы используете).

$app->options('/register', function ($app) {
    header('Access-Control-Allow-Origin: *');
    header('Access-Control-Allow-Methods: POST, OPTIONS');
    header('Access-Control-Allow-Headers: Content-Type');
    header('Content-Length: 0');
    header('Content-Type: application/json');
    die();
});

Или вы можете установить заголовки так, как описано https://www.slimframework.com/docs/v2/response/headers.html

$app->response->headers->set('Access-Control-Allow-Origin', '*');
$app->response->headers->set('Access-Control-Allow-Methods', 'POST, OPTIONS');
$app->response->headers->set('Access-Control-Allow-Headers', 'Content-Type');
$app->response->headers->set('Content-Type', 'application/json');