CODEWITHSUNDEEP
phpreactjslaraveldebugging
sp92
sp92

Reputation: 987

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,

];

Upvotes: 2

Views: 1472

Answers (3)

shoaib akbar
shoaib akbar

Reputation: 1

I faced this issue, I was sending the POST request from Postman and it converted to GET, I fixed it by adding '/' at the end of the endpoint

Upvotes: 0

iamakshatjain
iamakshatjain

Reputation: 540

In my case using window.fetch instead of just fetch worked.

Somehow this different fetch was getting added into the module. Haven't been able to figure out how!

function fetch(options) {

if (!is(this, fetch)) {

return new fetch(options);

}

this.options = normalizeOptions(options);

this.defer();

}

Upvotes: 0

Brian
Brian

Reputation: 556

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.

Upvotes: 2

Related Questions