为什么我的 POST 请求在提交表单时变成了 GET 请求?

时间:2021-06-04 02:13:27

标签: php reactjs laravel debugging

我正在使用带有 React.js 前端的 Laravel (8) 后端。在我的代码中,我正在向我的服务器发出 POST 请求。数据已成功发送到数据库,但我没有在控制台中收到响应。

相反,它以某种方式将 POST 请求转换为 GET 请求,我不知道为什么。我之所以知道它变成了 GET 请求,是因为我在提交表单以及通过“网络”选项卡进行验证时看到 URL 中的参数。

这几天我一直在尝试调试,但似乎没有任何效果 - 我已经尝试了所有在阳光下的一切以及 SO 中的所有建议来解决这个问题,但无济于事。我做错了什么?

React.js 代码:

const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [confirmPassword, setConfirmPassword] = useState("");

const handleSubmit = () => {
    let data = {
        'name': name,
        'email': email,
        'password': password,
        'c_password': confirmPassword
    };

    JSON.stringify(data);

    axios.post('http://website.test/api/register', data)
        .then(resp => {
            console.log(resp);
        }).catch(error => {
        console.log(error);
    });
}

api.php:

Route::middleware(['cors'])->group(function () {
    Route::post('/register', [RegisterController::class, 'register']);
});

注册控制器.php:

public function register(Request $request)
{
    $validator = Validator::make($request->all(), [
        'name' => 'required',
        'email' => 'required|email',
        'password' => 'required',
        'c_password' => 'required|same:password',
    ]);

    if ($validator->fails()) {
        return $this->sendError('Validation Error.', $validator->errors());
    }

    $userId = 'u-' . Str::uuid()->toString();
    $input = $request->all();
    $input['password'] = bcrypt($input['password']);
    $input['UserID'] = $userId;
    $user = User::create($input);
    $input['name'] = $user->name;
    $success['token'] = $user->createToken('MyApp')->accessToken;

    return $this->sendResponse($success, 'User registered successfully.', $input['UserID']);
}

cors.php

return [
'paths' => ['api/*'],

'allowed_methods' => ['*'],

'allowed_origins' => ['*'],

'allowed_origins_patterns' => [],

'allowed_headers' => ['*'],

'exposed_headers' => [],

'max_age' => 0,

'supports_credentials' => false,

];

1 个答案:

答案 0 :(得分:2)

我不知道你的表单是什么样子的,你是如何触发提交的,但我最好的猜测是你触发了默认的表单提交操作,这是一个 GET 请求。

您需要通过在提交处理程序的顶部添加 event.preventDefault(); 来防止表单这样做。