Javascript 为什么我的POST请求在Postman中可以正常工作，但在客户端（浏览器）上却不行？

我有一个Laravel和React.js项目，它们是独立的代码库。当我使用登录端点登录邮递员，然后使用另一个端点上载文件名（这两个端点都是POST请求）时，

文件路径

、

电子邮件

和

用户id

成功存储在数据库中

然而，当我在浏览器上尝试此操作时，我得到了

200

，但奇怪的是，数据库中没有存储任何内容

在Postman中，它以某种方式检测用户的登录，从而允许我将上述信息毫无问题地存储到DB中

在我的前端和后端代码中，我做错了什么，这些代码不允许我在浏览器上执行这些操作？我用这个撞到墙了，不知道从这里到哪里去

仅供参考：

dd（$user）返回正确的信息

如果您需要更多信息，请告诉我：）

这是我的
Upload.js
文件：

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");
        this.setState({
            id: id,
            email: 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] }, () => this.state.selectedFile);
    }

    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);
        console.log(file.name);
        formData.append('file',file);

        const headers = {
            'Authorization' : 'Bearer ' + accessToken,
            'Content-type': 'multipart/form-data'
        }

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

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

}

export default Upload;

<?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) {
        $user = Auth::user();

//        dd($user);
        if($user) {
            $user_id = Auth::user()->id;
            $email = Auth::user()->email;
            $filePath = $request->file('file')->getClientOriginalName();
            $data = [
                'file_path' => $filePath,
                'user_id' => $user_id,
                'email' => $email
            ];
            DB::table('mydb.photos')->insert($data);
        }

        return response()->json($user);
    }
}

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

Route::group([
    'prefix' => 'auth'
], function () {
    Route::post('login', 'AuthController@login');
    Route::post('signup', 'AuthController@signup');
    Route::post('wall-of-fame', 'FileUploadController@store');

    Route::group([
        'middleware' => 'auth:api'
    ], function() {
        Route::get('logout', 'AuthController@logout');
        Route::get('user', 'AuthController@user');
        Route::get('wall-of-fame', 'FileUploadController@fileUpload');
    });
});

这是我的
api.php
文件：

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");
        this.setState({
            id: id,
            email: 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] }, () => this.state.selectedFile);
    }

    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);
        console.log(file.name);
        formData.append('file',file);

        const headers = {
            'Authorization' : 'Bearer ' + accessToken,
            'Content-type': 'multipart/form-data'
        }

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

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

}

export default Upload;

<?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) {
        $user = Auth::user();

//        dd($user);
        if($user) {
            $user_id = Auth::user()->id;
            $email = Auth::user()->email;
            $filePath = $request->file('file')->getClientOriginalName();
            $data = [
                'file_path' => $filePath,
                'user_id' => $user_id,
                'email' => $email
            ];
            DB::table('mydb.photos')->insert($data);
        }

        return response()->json($user);
    }
}

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

Route::group([
    'prefix' => 'auth'
], function () {
    Route::post('login', 'AuthController@login');
    Route::post('signup', 'AuthController@signup');
    Route::post('wall-of-fame', 'FileUploadController@store');

    Route::group([
        'middleware' => 'auth:api'
    ], function() {
        Route::get('logout', 'AuthController@logout');
        Route::get('user', 'AuthController@user');
        Route::get('wall-of-fame', 'FileUploadController@fileUpload');
    });
});


我认为您可以尝试使用
的“访问控制允许来源：”

您可以阅读此链接以获取更多信息
我认为您可以尝试使用
设置响应的标题“访问控制允许源代码：”

您可以阅读此链接以获取更多信息
您是否可以捕获邮递员和浏览器的标题响应，然后显示在此处我刚刚在我的原始邮件上发布了邮递员和浏览器的标题响应是的，但是您与邮递员的照片拍错了这是我的意思，好的，我更新了我的原始邮件。有趣的是，如果我删除
内容类型
和
授权
，POST请求就会成功通过！真有趣v:v你能在邮递员和浏览器上截取标题回复吗？然后显示在这里我刚在我的原始邮件上发布了邮递员和浏览器的标题回复，但是你和邮递员拍错了照片。这是我的意思，好的，我更新了我的原始邮件。有趣的是，如果我删除
内容类型
和
授权
，POST请求就会成功通过！真有趣v:v