phpreactjslaraveldebugging

Why's my POST request turning into a GET request upon submitting the form?


I'm using a Laravel (8) backend with a React.js frontend. In my code, I'm making a POST request to my server. The data gets successfully sent to the database but I'm not getting a response in the console.

Instead, it's somehow turning the POST request into a GET request and I have no clue why. The reason why I know it's turning into a GET request's because I see the params in the URL upon submitting the form as well as verifying through the Network tab.

I've been trying to debug for this days on end but nothing seems to work - I've tried everything under the sun and all suggestions in SO to resolve this but to no avail. What am I doing wrong?

React.js code:

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

RegisterController.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,

];


Solution

  • I don't know what your form looks like how you are triggering the submit, but my best guess is you are triggering the default form submit action, which is a GET request.

    You need to prevent the form from doing that by adding event.preventDefault(); at the top of your submit handler.