javascript - 为什么我的 POST 请求在提交表单时被取消？

Question

我正在使用 Laravel 后端和 React.js 前端。我的 POST 请求在 Postman 中工作得很好，但是......

为什么我POST在浏览器中的 Axios 请求会给我一个状态Cancelled？我没有收到404错误（我想这是一个好兆头，如果我错了，请纠正我）。这可能是一个CORS问题吗？我已经Fruitcake设置好了，所以我正在处理这个CORS场景。我只是很困惑该怎么做。

如果我添加method="POST"到我的<form>, 并发出一个 POST 请求（表单提交） - 我会收到一个404错误，以及The POST method is not supported for this route. Supported methods: GET, HEAD.当它显然是一个POST请求时。

我很困惑，以前有人遇到过这种情况吗？

注意：192.168.10.10我的项目使用典型的本地 IP 地址托管在 Vagrant (Homestead) 上。不确定这与它有什么关系，但只是把它放在那里。同样，我的POST请求在 Postman 中运行良好。

我提前感谢指导/帮助。

这是我的 React.js 文件：

import React, {useState} from 'react';
import axios from 'axios';

const LoginSignUp = () => {
    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,
            'confirmPassword': confirmPassword
        };

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

    return (
        <div className="section">
                                    <form onSubmit={handleSubmit}>
                                        <div className="card-back">
                                            <div className="center-wrap">
                                                <div className="section text-center">
                                                    <h4 className="mb-4 pb-3">Sign Up</h4>
                                                    <div className="form-group">
                                                        <input type="text" name="logname"
                                                               className="form-style"
                                                               placeholder="Username"
                                                               id="userName"
                                                               autoComplete="none"
                                                               onChange={(e) => setName(e.target.value)}
                                                        />
                                                        <i className="input-icon uil uil-user"></i>
                                                    </div>
                                                    <div className="form-group mt-2">
                                                        <input type="email" name="logemail"
                                                               className="form-style"
                                                               placeholder="Your Email"
                                                               id="logemail"
                                                               autoComplete="none"
                                                               onChange={(e) => setEmail(e.target.value)}
                                                        />
                                                        <i className="input-icon uil uil-at"></i>
                                                    </div>
                                                    <div className="form-group mt-2">
                                                        <input type="password" name="logpass"
                                                               className="form-style"
                                                               placeholder="Your Password"
                                                               id="logpass"
                                                               autoComplete="none"
                                                               onChange={(e) => setPassword(e.target.value)}
                                                        />
                                                        <i className="input-icon uil uil-lock-alt"></i>
                                                    </div>
                                                    <div className="form-group mt-2">
                                                        <input type="password" name="logpassconfirm"
                                                               className="form-style"
                                                               placeholder="Confirm Password"
                                                               id="logpass"
                                                               autoComplete="none"
                                                               onChange={(e) => setConfirmPassword(e.target.value)}
                                                        />
                                                        <i className="input-icon uil uil-lock-alt"></i>
                                                    </div>
                                                    <button className="btn mt-4">Submit</button>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
        </div>
    );
}


export default LoginSignUp;

这是我的Kernel.php

<?php

namespace App\Http;

use Illuminate\Foundation\Http\Kernel as HttpKernel;

class Kernel extends HttpKernel
{
    /**
     * The application's global HTTP middleware stack.
     *
     * These middleware are run during every request to your application.
     *
     * @var array
     */
    protected $middleware = [
        // \App\Http\Middleware\TrustHosts::class,
        \App\Http\Middleware\TrustProxies::class,
        \App\Http\Middleware\PreventRequestsDuringMaintenance::class,
        \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
        \App\Http\Middleware\TrimStrings::class,
        \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
    ];

    /**
     * The application's route middleware groups.
     *
     * @var array
     */
    protected $middlewareGroups = [
        'web' => [
            \App\Http\Middleware\EncryptCookies::class,
            \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
            \Illuminate\Session\Middleware\StartSession::class,
            // \Illuminate\Session\Middleware\AuthenticateSession::class,
            \Illuminate\View\Middleware\ShareErrorsFromSession::class,
            \App\Http\Middleware\VerifyCsrfToken::class,
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ],

        'api' => [
            'throttle:api',
            \App\Http\Middleware\Cors::class,
            \Fruitcake\Cors\HandleCors::class,
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ],
    ];

    /**
     * The application's route middleware.
     *
     * These middleware may be assigned to groups or used individually.
     *
     * @var array
     */
    protected $routeMiddleware = [
        'auth' => \App\Http\Middleware\Authenticate::class,
        'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class,
        'cache.headers' => \Illuminate\Http\Middleware\SetCacheHeaders::class,
        'can' => \Illuminate\Auth\Middleware\Authorize::class,
        'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class,
        'password.confirm' => \Illuminate\Auth\Middleware\RequirePassword::class,
        'signed' => \Illuminate\Routing\Middleware\ValidateSignature::class,
        'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class,
        'verified' => \Illuminate\Auth\Middleware\EnsureEmailIsVerified::class,
    ];
}

注册控制器：

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

这是我的 api.php

use App\Http\Controllers\API\RegisterController;

Route::post('register', [RegisterController::class, 'register']);

标签： javascriptphpreactjslaraveldebugging