React App: CORB is blocking my request (via Axios) even though Access-Control-Allow-* headers exist in response

Question

I am trying to make a POST request from my React app (via Axios) to my API on the server-side written in PHP.

I already added these headers on the response side.

header( 'Access-Control-Allow-Origin: *' );
header( 'Access-Control-Allow-Methods: GET, POST, PUT, DELETE' );
header( 'Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With, X-PINGHEADER' );

But the problem that I am currently facing right now is this,

warning-from-console

and I know that it makes the POST request, but it blocks the post data being sent through it. I've read this from Mozilla, it says that only certain Content-Type is allowed through the CORS, but I need to send my data in application/json format.

I did change the request's Content-Type header to x-www-form-urlencoded and it does receive the data because it seems CORS don't block it. But when I changed it back to application/json, and it does not.

This is the request code from my React app.

import axios from 'axios';

const api = axios.create({
    baseURL: CONST.API_URL,
    params: {
        key: process.env.REACT_APP_API_KEY
    }
});

api.post('/create_user', { username: "johndoe" }).then(o => {
    // something goes here..
    const { data } = o;
    console.log(data.message);
}).catch(e => console.error(e));

This is my sample response:

<?php
header( 'Access-Control-Allow-Origin: *' );
header( 'Access-Control-Allow-Methods: GET, POST, PUT, DELETE' );
header( 'Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With, X-PINGHEADER' );

$username = $_POST['username'];
$response = array(
    "message" => "Hello $username!",
);

echo json_encode($response);
exit;
?>

As you can see, the $username has blank value because the CORB thing blocked the post data.

I expect Hello johndoe! from the code above:

"As you can see, the $username has blank value" — We can't see that (although I'd expect that since you are making a JSON formatted request and trying to read from `$_POST`). How are you reading the response if you have a CORB error blocking it? — Quentin, Jul 15 '19 at 10:23

omarqe · Answer 1 · 2019-07-15T17:00:55.207

0

After a while finding a solution to this, I decided to send the request with the normal application/x-www-form-urlencoded instead of application/json.

However, PHP receive the $_POST data from Axios in a very weird manner (if based from the codes I provided in the question above). Axios post the { username: "johndoe" } as a string so it becomes the key in $_POST in PHP like this:

Array(
    [{"username":"johndoe"}] => ""
)

To solve this, I used qs.stringify() method to serialise the data first before posting it. Hence, the final code will be:

import qs from 'qs';
import axios from 'axios';

const api = axios.create({
    baseURL: CONST.API_URL,
    params: {
        key: process.env.REACT_APP_API_KEY
    }
});

api.post(
    '/create_user',
    qs.stringify({username: "johndoe"}),
    {
        headers: {
            "Content-Type": "application/x-www-form-urlencoded"
        }
    }
)
    .then(o => {
        // something goes here..
        const { data } = o;
        console.log(data.message);
    }).catch(e => console.error(e));

edited Jul 15 '19 at 17:00

answered Jul 15 '19 at 14:16

omarqe

59
12

"in a very weird format" — That weird format is JSON. – Quentin Jul 15 '19 at 15:14
I should rephrase the word "format" with "manner". What I mean by weird 'format' is that it treats the data as key instead in PHP. JSON format isn't weird. – omarqe Jul 15 '19 at 17:00
You said `"Content-Type": "application/x-www-form-urlencoded"` so it tried to parse the JSON as if it were urlencoded. Everything up to the first `=` is the first key. Since there is no `=`, that's everything to the end. Moral of the story: Don't lie about your data format. – Quentin Jul 15 '19 at 17:01
Ahh I see, you're right! Thanks for clearing that out – omarqe Jul 15 '19 at 17:10

React App: CORB is blocking my request (via Axios) even though Access-Control-Allow-* headers exist in response

1 Answers1