set header in react api request in componentDidMount() - reactjs

Question

Hi so the problem i'm struggling with is i have an api with an accesskey and i don't know how to setup the header inside the component with that api access key, i'm using a default fetch random user api in example below but i want to know how and where should i add that header with access key, thanks in advance.
import React from 'react';
export default class FetchRandomUser extends React.Component {
async componentDidMount() {
const url = "https://api.randomuser.me/"
const response = await fetch(url)
const data = await response.json();
this.setState({ person: data.results[0], loading: false })
}
render() {
return <div>
{this.state.loading || !this.state.person ? (<div>Loading...</div>) : (<div>{this.state.person.name.first}</div>)}
</div>
}
}

Answer 1

fetch(url, {
method: 'GET',
headers: {
authorization: youKEY,
Accept: 'application/json',
},
});

Answer 2

This is how you can pass your api key in url https://randomapi.com/api/qcol88t8?key=TCGJ-8B0M-33L6-UX5Q;`
Code
export default class FetchRandomUser extends React.Component {
state = {
loading: true,
person: {}
};
async componentDidMount() {
const url = `https://randomapi.com/api/qcol88t8?key=TCGJ-8B0M-33L6-UX5Q`;
const response = await fetch(url);
const data = await response.json();
this.setState({ person: data.info, loading: false });
}
render() {
return (
<div>
{this.state.loading || !this.state.person ? (
<div>Loading...</div>
) : (
<h2>{this.state.person.user.username}</h2>
)}
</div>
);
}
}

Answer 3

0
fetch(your_url,a_json_object) Here,json_object has one element called headers,just use your custom header in it. But most noobies forget to add the header in backend.I am showing a correct example:
front end:
fetch('fdf.api/getid',{
method:'post',
headers:{"a_custom_header":"custom_value"}
})
backend:
const express = require('express')
const app = express()
app.use(function(req,res,next){
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS,
PUT,PATCH, DELETE');
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type,a_custom_header'); //notice here carefully
res.setHeader('Access-Control-Allow-Credentials', true);
next();
})