Post request works when use PHP, but it fails with a 500 Internal Error when I use Axios with React, how can I fix that?

Question

I create the following code in PHP:

$url = $API_URL.'/api/v1/courses/'.$COURSE_ID.'/quizzes/'.$QUIZ_ID.'/reports?quiz_report[report_type]=student_analysis&quiz_report[includes_all_versions]=1';
$crl = curl_init();
$headr = array();
$headr[] = 'Content-length: 0';
$headr[] = 'Content-type: application/json';
$headr[] = 'Authorization: Bearer '.$API_KEY;
curl_setopt($crl, CURLOPT_URL, $url );
curl_setopt($crl, CURLOPT_HTTPHEADER,$headr);
curl_setopt($crl, CURLOPT_POST,true);
$rest = curl_exec($crl);
curl_close($crl);

This code works perfectly. Something important that I noticed is if I remove the part "$headr[] = 'Content-length: 0';", the request fails with a 400 Bad Request error.

Now I need to do this with React, I use Axios, this is the code that I use:

var config2 = {
  headers: {
    'Access-Control-Allow-Origin': '*',
    'Authorization': "Bearer 11748~BTNBIfTKrIORcK7SVw09Gryq5bc1MipitSFA4K4Lwh1inbv0jfj5z7mL9U6p1GV3",
    'Accept'       : 'application/json',
    'Content-Length' : '0',
    'Content-type' : 'application/json'
  }
};
let course_id = '8717'
let quiz_id = '58320'
try {
    let url2 = Constantes.URL_PREFIX+'/courses/'+course_id+'/quizzes/'+quiz_id+'/reports?quiz_report[report_type]=student_analysis&quiz_report[includes_all_versions]=1'
    const response = await axios.post( url2, config2 )
    console.log("xxx - response.data")
    console.log(response.data)
} catch(err) {
    console.log("ERRO - xxx: "+err)
}

After running the code, I got a 500 internal error. If I change the following code below const response = await axios.post( url2, config2 ) to const response = await axios.get( url2, config2 ) The code works, but I need to run this code using axios.post, just like I do with the PHP code.

The react app does all its requests using a CORS PROXY, I also got an error with 'Content-Length': '0', when I use the axios.get, the error that I got is Refused to set unsafe header "Content-Length"

This error doesn't appear when I use axios.post, instead of this error I got the 500 Internal Error.

Any tips to fix this?

I don't think you need to set content length with axios, it will do it for you. — HMR
Ok, thanks for letting me know. I will remove it from the code. I just put it here because on the PHP it needs to be set. — fabiobh

fabiobh fabiobh · Accepted Answer · 2020-05-25T20:50:53

I fix the problem using fetch() from javascript.

I simple fetch using post method works for me, don't know it didn't work for Axios.

I think it's a problem from Axios, I'll just post a message later on their Github.

Post request works when use PHP, but it fails with a 500 Internal Error when I use Axios with React, how can I fix that?

1 Answers