Error the GET method is not supported for route api/Login. Supported methods: POST

Question

I'm developing a project in PHP Laravel and React.

I have a login screen in react where I make an axios request to the PHP API in the api.php file, however even though axios is defined as post and my route in the API I also receive the error:

The GET method is not supported for route api/ Login. Supported methods: POST.

I've tried several solutions but they all tell me the same solution. Both methods should be posted, but they are already like this.

api.php file code:

<?php

use App\Http\Controllers\AuthController;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers;


Route::middleware('auth:sanctum')->group(function(){
    Route::get('/user', function (Request $request) {
        return $request->user();
});
    Route::post('/Logout', [AuthController::class, 'Logout']);
    Route::get('/Users', [Controllers\UserController::class, 'index']);
});

Route::post('/CadastrarUsuario', [AuthController::class, 'CadastrarUsuario']);
Route::post('/Login', [AuthController::class, 'Login']);

router.jsx file code:

import { Routes, Route } from "react-router-dom";


import DefaultLayout from "./components/DefaultLayout";
import AuthenticatedLayout from "./components/AuthenticatedLayout";

{/* Rotas padrão */}
import Home from "./views/SemAuteticacao/Home";
import Login from "./views/SemAuteticacao/Login";
import Dashboard from "./views/Autenticada/Dashboard";
import Signup from "./views/SemAuteticacao/Signup";
import NotFound from "./views/NotFound";

const router = (
    <Routes>
       
        <Route
            path="/"
            element={<DefaultLayout />}>
            <Route index element={<Home />} />
            <Route path="/Home" element={<Home />} />
            <Route path="/Login" element={<Login />} />
            <Route path="/Signup" element={<Signup/>} />
        </Route>

     
        <Route
            path="/admin"
            element={<AuthenticatedLayout />}>
            <Route index element={<Dashboard />} />
        </Route>

  
        <Route path="*" element={<NotFound />} />
    </Routes>
);

export default router;

login.jsx file code:

import {Link} from "react-router-dom";
import {useRef, useState} from "react";
import {useStateContext} from "../context/ContextProvider.jsx";
import axiosClient from "../../axios-client.js";

export default function Login(){

  const emailRef = useRef();
  const senhaRef = useRef();

  const {setUser, setToken} = useStateContext()
  const [errors, setErrors] = useState(null)
  const [message, setMessage] = useState(null)

  const onSubmit = (ev) =>
  {
    ev.preventDefault()
    const payload =
      {
        email: emailRef.current.value,
        password: senhaRef.current.value,
      }
    console.log(payload)
    setErrors( null )
    axiosClient.post('/Login', payload)
      //Se os dados estiverem corretos executa isso
      .then(({data}) => {
        setUser(data.user)
        setToken(data.token)

      }).catch( err => {
      const response = err.response;
      if(response && response.status == 422)
      {
        //Erros genericos
        if(response.data.errors)
        {
          console.log(response.data.errors)
          setErrors(response.data.errors)
        }
        //email existe mas senha errada
        else
        {
          console.log(response.data.message)
          setErrors({
            email:[response.data.message]
          })
        }

      }
    })
  }

    return (
        <div className="login-signup-form animated fadeInDown">
            <div className="form">
              <h1 className="title">Entre na sua conta</h1>

              {message &&
                <div className="alert">
                  <p>{message}</p>
                </div>
              }
              <form onSubmit={onSubmit}>
                <input ref={emailRef} type="email" placeholder="Email"/>
                <input ref={senhaRef} type="password" placeholder="Senha"/>
                <button className="btn btn-block">Entrar</button>
                <p className="message">
                  Não registrado? <Link to="/signup">Crie uma conta!</Link>
                </p>

                {errors &&
                  <div className="alert">
                    {Object.keys(errors).map(key => (
                      <p key={key}>{errors[key][0]}</p>
                    ))}
                  </div>
                }
              </form>
            </div>
        </div>
    )
}

error received:

The GET method is not supported for route api/Login. Supported methods: POST.

Error console:

login:1 Access to XMLHttpRequest at 'http://127.0.0.1:8000/api/Login' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Login.jsx:25 POST http://127.0.0.1:8000/api/Login net::ERR_FAILED 200 (OK)

Network:

I tried several solutions on this platform but they all told me that both methods should be the same from both the API and the front. But it's already like this in my code, I don't know why the error appears

Answer 1

use this to solve the cors problem:

public function handle($request, Closure $next)
{
return $next($request)
//Acrescente as 3 linhas abaixo
->header('Access-Control-Allow-Origin', "*")
->header('Access-Control-Allow-Methods', "PUT, POST, DELETE, GET, OPTIONS")
->header('Access-Control-Allow-Headers', "Accept, Authorization, Content-Type");
}