Javascript 为什么赢了'；我的post请求是否在浏览器上工作，但在邮递员中工作？

我的React.js项目和Laravel项目是分开的

我使用此端点（

http://127.0.0.1:8000/api/auth/login

）

然后我用这个（

http://127.0.0.1:8000/api/auth/wall-名望

）

一切正常-用户的登录和登录用户可以成功地将文件连同其

用户id

、

电子邮件和
文件路径一起上载到数据库。我在回复正文中的Postman中成功插入了

这项工作唯一非常奇怪的地方是，我没有使用访问令牌成功地将上述数据上传到Postman中的db

但是，当我在浏览器上尝试上述两个步骤时，在检查网络选项卡时，我得到一个
200
，但数据库中没有存储任何内容。我之所以使用访问令牌，是因为除此之外，我如何才能在客户端识别经过身份验证的用户？我在浏览器的响应正文中获得
失败

因为这个过程在邮递员身上起作用，所以我倾向于前端和我的Axios呼叫有问题。我做错了什么


下面是
Upload.js
code：

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 }, () => 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" onSubmit={this.onFormSubmit}>
                <input type="file" name="file" onChange={this.onChange}/>
                <button type="submit">Upload</button>
            </form>
        );
    }

}

export default Upload;

<?php

namespace App\Http\Controllers;

use App\Photo;
use App\User;
use Illuminate\Database\Eloquent\Model;
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('db.photos')->insert($data);
            return "inserted successfully";
        }

    return "failed";

    }
}

下面是
Auth.php
登录方法：

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

这是我的
User.php
文件（模型）：

下面是
api.php
文件：

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

查看您的FileUploadController。当它返回“failed”时，必须是
$user=Auth:：user（）返回非真值。@但问题是它不返回非真值。当我调用
dd（$user）时它在Postman中返回当前登录用户的正确信息。是的，在Postman中。但显然不是当你从react打电话给它的时候。请用护照检查一下这个？确保将“新鲜令牌”添加到web内核“web”=>[//其他中间件…\Laravel\Passport\Http\middleware\createFreshApitonk:：class，]，
<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Photo extends Model
{
    public function user() {
        return $this->belongsTo(User::class);
    }
}

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