Laravel React MySQL 路由问题

Question

我正在尝试注册用户，但我收到 404 错误，假设这意味着 react 无法找到 api.php 文件建立的路由，我还有什么别的吗失踪？我已经在 package.json 文件中设置了代理设置为“localhost:8000”（我选择用于 laravel 后端的端口）。我很困惑为什么它在提交时没有到达这条路线。我觉得我很接近，但我是使用 php 作为后端的新手，所以任何见解都会有所帮助。

我还在创建用户可以在应用程序上播放音乐的东西，所以有一条标记为“商店”的路线，这不起作用的唯一原因是我没有设置该路线（也会出现 404 错误）。

以下是我试图做出反应以检测的 api 路由

<?php

Route::post('register','UserController@register');
Route::post('login','UserController@login');
Route::post('profile','UserController@getAuthenticatedUser');

Route::middleware('auth:api')->get('/user', function(Request $request){
    return $request->user();
});

?>

这是我的注册文件的 React 部分。

  import React, { Component } from 'react';
import { register } from './UserFunctions';

class Register extends Component {
    constructor() {
        super()

    this.state = {
        first_name: '',
        last_name: '',
        email: '',
        password: '',
        errors: {},
    }

    this.onChange = this.onChange.bind(this)
    this.onSubmit = this.onSubmit.bind(this)
}

onChange(e) {
    this.setState({ [e.target.name]: e.target.value })
}

onSubmit(e) {
    e.preventDefault()

    const newUser = {
        name: this.state.first_name + ' ' + this.state.last_name,
        email: this.state.email,
        password: this.state.password
    }

    register(newUser).then(res => {
        if (res) {
            this.props.history.push('/login')
        }
    })
}

render() {
    return (
        <div className="container">
            <div className="row">
                <div className="col-md-6 mt-5 mx auto">
                    <form noValidate onSubmit={this.onSubmit}>
                        <h1 className="h3 mb-3 font-wieght-normal">
                            Register
                        </h1>

                        <div className="form-group">

                            <label htmlFor="first_name">First Name</label>
                            <input type="text" className="form-control" name="first_name" placeholder="Enter First Name" value={this.state.first_name} onChange={this.onChange} />

                            <label htmlFor="last_name">Last Name</label>
                            <input type="text" className="form-control" name="last_name" placeholder="Enter Last Name" value={this.state.last_name} onChange={this.onChange} />

                            <label htmlFor="email">Email Address</label><br />
                            <input type="email" className="form-control" name="email" placeholder="Enter Email" value={this.state.email} onChange={this.onChange} />
                            <br />
                            <label htmlFor="password">Desired Password</label><br />
                            <input type="password" className="form-control" name="password" placeholder="Enter Password" value={this.state.password} onChange={this.onChange} />
                        </div>
                        <button type="submit" className="btn btn-lg btn-primary btn-block">Register</button>
                    </form>
                </div>
            </div>
        </div>
    )
}
}

export default Register

我已经定义了这些发布路线，但是当我在我的注册表单中按提交时，我收到一个 404 错误，说它找不到这条路线。

Answer 1

你能给我看看你的

import { register } from './UserFunctions';

文件，以便我可以看到定义的 url 路径。

假设这条路线在你的 routes/api.php 中

Route::group(['middleware' => 'api', 'prefix' => 'v1'], function(){
Route::post('register', 'RegisterController@index');
});  

在JS文件中

    import axios from 'axios'

export const register = newUser => {
    return axios
        .post('api/v1/register', newUser,
        {
            headers: { 'Content-Type': 'application/json' }
        })
    .then(res => {
        console.log(res)
    })
    .catch(err => {
        console.log(err)
    })
}