Question

我正在使用REST API使用ReactJS前端和Laravel后端构建一个简单的Web应用程序。
这是我的代码。

用于身份验证的Laravel后端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前端

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

问题是，如果您在react中发送获取请求，则php终端只会显示一个空数组并显示：

400错误请求，响应中带有invalid_credentials响应

而邮递员的要求正好显示我将要看到的内容。

出什么问题了？我的后端错了吗？

Answer 1

您不需要添加Content-Type标头。您可以使用axios代替获取api吗？

尝试此操作以获取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)
}
}

Laravel REST API无法从React Fetch Request读取输入数据

1 个答案: