Javascript 为什么'；What’我的发帖请求在Postman中工作，但在浏览器上不工作，即使我'；我做的有点类似？

就数据库中存储的

文件路径

、

用户id

和

电子邮件

而言，我不知道为什么此post请求在浏览器中不起作用

在我的日志中，我遇到了以下错误：

ErrorException:试图获取非对象的属性“id”

但在《邮递员》中效果很好。首先，我使用下面的端点登录，然后选择一个文件，最后，使用另一个端点上传。使用Postman成功地将文件路径

、

用户id

和

email`存储在数据库中

当用户登录（通过浏览器或邮递员）时，他们返回一个访问令牌。我试图在前端代码中使用该访问令牌来识别用户是谁，但我甚至不知道我这样做是否正确

奇怪的是，我在《邮递员》中没有使用不记名代币，但一切都很好

那么为什么它不能在浏览器中工作呢？我的前端代码错了吗？如果是的话，我看不出有什么问题

这是我的前端代码：

import React, {Component} from 'react';

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

    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);

        const headers = {
            'Contant-Type' : 'application/json',
            'Authorization' : 'Bearer ' + accessToken,
        }

        fetch('http://127.0.0.1:8000/api/auth/wall-of-fame', {
            method: 'POST',
            body: formData,
            headers: headers
        })
            .then(response => console.log(response))
            .catch(error => { console.error(error) });
    }

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

}

export default Upload;

这是我的

创建用户\u表

：

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateUsersTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('users', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('email')->unique();
            $table->timestamp('email_verified_at')->nullable();
            $table->string('password');
            $table->rememberToken();
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('users');
    }
}

<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreatePhotosTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('photos', function (Blueprint $table) {
            $table->id();
            $table->string('file_path', 200);
            $table->string('email', 200);
            $table->unsignedBigInteger("user_id");
            $table->timestamps();
            $table->foreign('user_id')->references('id')->on('users')->onDelete('cascade');
            $table->foreign('email')->references('email')->on('users')->onDelete('cascade');
        });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('photos');
    }
}

---

你能把代码的范围缩小一点吗？您怀疑问题出在哪里？@feedy我相信问题出在我的前端代码中

fileUpload（）

，但不完全确定您能否显示从开发工具和邮递员处获取的请求正文。让我们看看有没有什么不同。还要确保你没有遗漏邮递员所包含的一些标题default@feedy忘了提到我获取日志的错误是

ErrorException:试图获取非对象的属性“id”

，但我不知道这个错误指的是哪一行？你能把代码的范围缩小一点吗？您怀疑问题出在哪里？@feedy我相信问题出在我的前端代码中

fileUpload（）

，但不完全确定您能否显示从开发工具和邮递员处获取的请求正文。让我们看看有没有什么不同。还要确保你没有遗漏邮递员所包含的一些标题default@feedy忘了提到我获取日志的错误是

ErrorException：试图获取非对象的属性“id”

，但我看不出这个错误指的是哪一行？

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateUsersTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('users', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('email')->unique();
            $table->timestamp('email_verified_at')->nullable();
            $table->string('password');
            $table->rememberToken();
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('users');
    }
}

<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreatePhotosTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('photos', function (Blueprint $table) {
            $table->id();
            $table->string('file_path', 200);
            $table->string('email', 200);
            $table->unsignedBigInteger("user_id");
            $table->timestamps();
            $table->foreign('user_id')->references('id')->on('users')->onDelete('cascade');
            $table->foreign('email')->references('email')->on('users')->onDelete('cascade');
        });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('photos');
    }
}