Why isn't my POST request working on the browser but it's working in postman even though I'm following the same steps/way?

I’m trying to figure out why my code successfully posts the file name, id and email to the db with no problems via Postman but when I try it on the browser with my code – it fails and gives this error in the logs: ErrorException: Trying to get property 'id' of non-object in file.

In Postman, here are my steps:

1. Successfully authenticate using login endpoint
2. Successfully post file name, id and email to the db with a separate endpoint

I can’t see what I’m doing wrong with fetch(). I’m doing it exactly the same way as my post request in Postman following the same steps in the browser. The only difference’s that I’m using an access token and headers to identify who the user is even though in Postman I’m NOT using an access token and headers but it’s working fine, oddly.

If I remove the access token and header, then I still get the aforementioned error in the logs, oddly again.

Inside the dd($id, $email); – it’s indeed returning the correct information when making the post request so we can rule out these variables aren’t the issue.

What am I doing wrong and how can I rectify this?

frontend React.js code:

import React, {Component} from 'react';
import Cookies from 'js-cookie';

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

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

    componentDidMount() {
        this.getId();
        this.getEmail();
    }

    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 = Cookies.get("access_token").slice(13,-8);

        console.log(accessToken);
        formData.append('file', file);

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

        fetch('http://my/api/endpoint/url', {
            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;

backend Laravel controller code:

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

    // dd($id, $email);

    $data = [
        'file_path' => $filePath,
        'user_id' => $id,
        'email' => $email
    ];

    DB::table('db.photos')->insert($data);
    echo "Record inserted successfully.<br/>";
}