javascript - 在浏览器上发出与在 Postman 中完全相同的 POST 请求时，我错过了什么，导致它失败？

Question

在 Postman 中 - 我使用登录端点成功登录，之后，我进行了文件上传，该文件上传成功地与下面的端点一起使用。id 和文件路径成功存储在数据库中。我可以得出结论，在 Postman 中 - 登录并仅附加一份表单数据（即正在上传的文件）后，id 和电子邮件在 Postman 中显示正确的值。我可以确认它，因为如果我运行dd($id, $email);，则会返回正确的值。我没有像我在前端代码中那样附加电子邮件和用户 ID

但是，在浏览器上 - 我正在尝试发送用户 ID 和电子邮件，但我在日志中不断收到 500 错误，上面写着："Trying to get property 'id' of non-object".

当我在浏览器上尝试它时，我正在尝试使用访问令牌，它有望检测到用户是谁，但这不起作用。我究竟做错了什么？

这是我的前端代码：

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

class Upload extends Component {
    constructor(props) {
        super(props);

        this.state = {
            selectedFile: null,
            id: null,
            email: ''
        };
        this.onFormSubmit = this.onFormSubmit.bind(this);
        this.onChange = this.onChange.bind(this);
        this.fileUpload = this.fileUpload.bind(this);
    }

    componentDidMount() {
        console.log("Inside componentDidMount()");
        let id = localStorage.getItem("id");
        let email = localStorage.getItem("email");
        console.log(id);
        console.log(email);
        this.getId(id);
        this.getEmail(email);
    }

    getId(id) {
        console.log("inside getId()");
        this.setState({id: id}, () => console.log(this.state.id));
    }

    getEmail(email) {
        console.log("inside getEmail");
        this.setState({email: email}, () => console.log(this.state.email));
    }

    onFormSubmit(e) {
        e.preventDefault();
        this.fileUpload(this.state.selectedFile);
    }

    onChange(e) {
        this.setState({ selectedFile: e.target.files[0] });
    }

    fileUpload(file) {
        const formData = new FormData();
        const accessToken = localStorage.getItem("access_token").slice(13,-8);

        console.log(accessToken);
        console.log(this.state.id);
        console.log(this.state.email);
        formData.append('file', file);

        axios.post('http://myendpoint/api/auth/dash', formData)
            .then(response => {
                console.log(response);
            }).catch(error => {
                console.log(error);
        });
    }

    render() {
        return (
            <form encType='multipart/form-data' id="login-form" className="form" onSubmit={this.onFormSubmit}>
                <input type="file" name="file" id="file" onChange={this.onChange}/>
                <button type="submit">Upload</button>
            </form>
        );
    }

}

export default Upload;

这是我的后端控制器代码（使用 Laravel Passport）：

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\DB;

class FileUploadController extends Controller {

    public function store(Request $request) {
        $filePath = $request->file('file')->getClientOriginalName();
        $id = $request->user()->id;
        $email = $request->user()->email;

        // dd($id, $email);

        if (($user = Auth::user()) !== null) {
            $data = [
                'file_path' => $filePath,
                'user_id' => $id,
                'email' => $email
            ];

            DB::table('my.db')->insert($data);
            return response()->json($user);
        }
        return "failed";
    }
}

这是控制器中的登录方法：

public function login(Request $request) {
    $request->validate([
        'email' => 'required|string|email',
        'password' => 'required|string',
        'remember_me' => 'boolean'
    ]);
    $credentials = request(['email', 'password']);
    if(!Auth::attempt($credentials))
        return response()->json([
            'message' => 'Unauthorized'
        ], 401);
    $user = $request->user();
    $tokenResult = $user->createToken('Personal Access Token');
    $token = $tokenResult->token;
    if ($request->remember_me)
        $token->expires_at = Carbon::now()->addWeeks(1);
    $token->save();
    return response()->json([
        'access_token' => $tokenResult->accessToken,
        'token_type' => 'Bearer',
        'expires_at' => Carbon::parse(
            $tokenResult->token->expires_at
        )->toDateTimeString(),
        $user
    ]);
}

标签： javascriptphpreactjslaraveldebugging