CORS blocking allowed headers

Question

Hello I have created an API and front end using React and doing request with axios. I added an authorization header with axios and I authorized it with php server-side but when the browser send the POST request, there is no Authorization Header.

// Tasks.js

const httpClient = axios.create({baseURL: "http://localhost/cpp/api/v1/"})
const resp = await httpClient.post("/work/createWork.php", {
    body: {
        taskid: id,
        title: data.name,
        content: data.content,
        date: data.date,
        matiere: data.matiere,
        userID: 3
    },
    headers: {
        'Authorization': "XXXXXXXX"
    }
});

// createWork.php

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: OPTIONS, POST");
header("Access-Control-Allow-Header: Content-Type, Authorization");
header("Access-Control-Max-Age: 86400");

if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    http_response_code(204);
    exit;
}

include './../main.php';

global $db;

$rq = new APIRequest("POST", true);

header("Content-Type: application/json");

if (!isset($_SERVER['HTTP_Authorization'])) {
    echo "{\"error\": \"This endpoint need auth.\"}";
    http_response_code(403);
    return;
}

ERROR : POST http://localhost/cpp/api/v1/work/createWork.php [HTTP/1.1 403 Forbidden 19ms]

The client is sending the header `Authorization`, but the server is checking for the header `HTTP_Authorization`. — outlaw, Aug 11 '23 at 13:10
@outlaw It looks to be the correct way: [How do I read any request header in PHP](https://stackoverflow.com/a/541463/2257664). But it should be in uppercase though. — A.L, Aug 11 '23 at 13:12
@A.L whoops, thanks! I always use `getallheaders()` and didn't realize they were stored in `$_SERVER` with the prepended `http`! — outlaw, Aug 11 '23 at 13:19
For one thing, your code contains a typo: `Access-Control-Allow-Header` should be `Access-Control-Allow-Headers` (plural). This is one reason why I recommend the use of an existing CORS middleware library rather than that of a middleware written from scratch. — jub0bs, Aug 11 '23 at 18:02

A.L · Answer 1 · 2023-08-11T13:23:28.520

0

JS

The Axios documentation shows that headers are provided as the third parameter of the post method (indentation added so that's it's easier to see):

const {data} = await axios.post(
    '/user',
    document.querySelector('#my-form'),
    {
        headers: {
            'Content-Type': 'application/json'
        }
    }
)

So you have to remove headers that is next to body and pass it as the third parameter:

const httpClient = axios.create({baseURL: "http://localhost/cpp/api/v1/"})
const resp = await httpClient.post(
    "/work/createWork.php",
    {
        taskid: id,
        title: data.name,
        content: data.content,
        date: data.date,
        matiere: data.matiere,
        userID: 3
    },
    {
        headers: {
            'Authorization': "79619bca-225b-4f28-b337-43d37bbb5048"
        }
    },
);

The body isn't shown in the documentation, I removed it.

PHP

if (!isset($_SERVER['HTTP_Authorization'])) {

should be:

if (!isset($_SERVER['HTTP_AUTHORIZATION'])) {

See How do I read any request header in PHP.

edited Aug 11 '23 at 13:23

answered Aug 11 '23 at 13:08

A.L

10,259
10
67
98

Thank you I’ll test it when I will be home. – PastaLaPate Aug 11 '23 at 13:28
I applied your modification and it's always the same error (403) but this time, the header has been sended – PastaLaPate Aug 11 '23 at 19:55
@PastaLaPate you can dump the content of `$_SERVER` to see what is happening, with something like `var_dump($_SERVER);`. – A.L Aug 12 '23 at 14:13
Yes and in $_SERVER the header is not present – PastaLaPate Aug 12 '23 at 18:17
I can't explain why the header is sent by the browser but not received by the PHP side. Please edit the question if something is missing, like a proxy that could intercept the headers. – A.L Aug 12 '23 at 18:45
I think I am going to use ``getallHeaders()`` – PastaLaPate Aug 12 '23 at 20:09

CORS blocking allowed headers

1 Answers1

JS

PHP