POST-запрос с использованием Angular HttpClient не работает
Я пытаюсь опубликовать пользовательские данные в 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);
});
Я получаю ошибку
-
Не удалось загрузить ресурс: сервер ответил со статусом 404 (не найдено).
-
Ошибка загрузки http://www.something.com/register: Ответ на предпечатную проверку имеет недопустимый код состояния HTTP 404
Этот API отлично работает в Postman, но сталкивается с проблемой, когда я запускаю приложение в Chrome.
Что-то мне не хватает в API или во время POST-вызова?
Пожалуйста помоги. Заранее спасибо.
Редактировать:
Я добавил скриншот вкладки сети. Это то, что я получаю в своих заголовках запросов и ответов. Я думаю, что может быть несовпадение в двух заголовках, и определенно это не может быть проблемой с CORS, потому что я могу делать вызовы GET без каких-либо проблем с CORS.
Добавлен скриншот вкладки консоли с ошибками:
Решение
Так как это работает от Почтальона, но не от вашего приложения, я бы внимательно посмотрел на 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');
Другие решения
попробуй это
header('Access-Control-Allow-Origin: *');
$dados = file_get_contents('php://input');
вы получите JSON из вашего углового запроса …