I am trying to pass a bearer token from my frontend to my backend server using a axios get requrest. I included the bearer token in the header. The header information is declared in a config varialble. I sent the get request with the url and config file as the MDN documents said to do.
What am I doing wrong?
The code below is acting as my UI. I didn't want to waste time on a fancy interface so I made something that runs when loaded and use my browser's dev tools to monitor network traffic and errors.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<title>Document</title>
<script>
var token = "this is the token sent";
const config = {
withCredentials:true,
headers:
{
Authorization:"Bearer "+token
}
};
const urlUpdate2 = "authorizationHeaderTest.php";
axios.post(urlUpdate2,config).then((response)=>{
console.log(response);
}).catch((error)=>{
console.log(error);
});
</script>
</head>
<body>
</body>
</html>
Below is a simple backend code that is suppose to get the Authorization request header information and send it back with the promise to see if I successfully sent the token.
<?php
header('Access-Control-Allow-Origin:*');
header("Access-Control-Allow-Methods:GET,OPTIONS");
header("Access-Control-Allow-Header:Content-Type,Access-Control-Allow-Headers,X-Requested-With");
header("Access-Control-Allow-Credentials", "true");
header("Content-Type:application/json; charset=UTF-8");
$headerArray = apache_request_headers();
echo json_encode($headerArray["Authorization"]);
?>
It is returning a http 500 error for some reason.
what am I doing wrong?
What I have tried:
I don't know what else to try.