Laravel REST API не может прочитать входные данные из запроса React Fetch

Question

Я создаю простое веб-приложение с внешним интерфейсом ReactJS и внутренним интерфейсом Laravel с использованием REST API.Вот мои коды.

Laravel Backend API для аутентификации

class UserController extends Controller 
{
    public function authenticate(Request $request) 
    {
        $credentials = $request->only('email', 'password');

        error_log(print_r($credentials, TRUE));

        try {
            if (! $token = JWTAuth::attempt($credentials)) {
                return response()->json(['error' => 'invalid_credentials'], 400);
            }
        } catch (JWTException $e) {
            return response()->json(['error' => 'could_not_create_token'], 500);
        }

        return  response()->json(compact('token'));
    }
}

ReactJS Frontend

login() {
    fetch ('http://localhost:8000/api/login',
        {
            header: {
                "Accept": "application/json, text/plain, */*",
                "Content-Type": "application/json",
            },
            method: "POST",
            body: JSON.stringify({email: this.state.email, password: this.state.password}),
        }
    )
    .then(response => console.log(response));
}

ИПроблема в том, что если вы отправляете запрос на выборку в реакции, терминал php показывает только пустой массив и получает:

400 Плохой запрос с ответом invalid_credentials

в то время как Почтальонзапрос показывает именно то, что я увижу.

В чем проблема?Мой бэкэнд не так?

Answer 1

Вам не нужно добавлять заголовок Content-Type. Вместо получения api вы можете axios?

Попробуйте это для получения Api

login() {
    fetch ('http://localhost:8000/api/login',
        {
            header: {
                "Accept": "application/json"
            },
            method: "POST",
            body: ({email: this.state.email, password: this.state.password}),
        }
    )
    .then(response => console.log(response));
}

и для axios (это работает для меня)

login() {
    axios.post('http://localhost:8000/api/login',
    {
      email: this.state.email,
      password: this.state.password
    })
    .then(res => {
     console.log(res.data)
}
}