unauthorized when retrieving profile info

What stack are you using?

(ex: MERN(mongoose + react), DR(django + react), PEN, etc.)

MERN

What's the problem you're trying to solve?

When I request the profile for the logged in user, I get an unauthorized error in my client. But I'm not having that problem when I use postman. I can even copy my token from my state in the React app, paste it into postman, and complete the request successfully.

Post any code you think might be relevant (one fenced block per file)

This is the fetch request from App.js, and the useEffect that calls it.

const getProfile = () => {
        if (user != null) {
            fetch(apiUrl + '/profile', {
                'Content-Type': 'application/JSON',
                'Authorization': 'Bearer ' + user.token,
            })
                .then(profile => {
                    console.log('this is user.token')
                    console.log(user.token)
                    console.log(profile)
                    // setProfile(profile.json())
                })
                // .then(profile => {console.log(profile)})
                .catch(error => console.log(error))
        }
    }

useEffect(() => {
getProfile()
}, [user])

If you see an error message, post it here. If you don't, what unexpected behavior are you seeing?

This is the console.log I get on the front end home page in response to the fetch:

Response {type: 'cors', url: 'http://localhost:8000/profile', redirected: false, status: 401, ok: false, …}
body: (...)
bodyUsed: false
headers: Headers {}
ok: false
redirected: false
status: 401
statusText: "Unauthorized"
type: "cors"
url: "http://localhost:8000/profile"
[[Prototype]]: Response

What is your best guess as to the source of the problem?

Something about the headers, I'm guessing?

What things have you already tried to solve the problem?

I've tried it several ways in postman, and it seems to be working fine. I'm not sure why the fetch would be goofing up here.

WDI-SEA / project-4-issues