I am trying to make request with XMLHttpRequest from file://example.html to http://localhost/index.php. I read a lot about CORS(in this case origin is null, this is OK.) and i have no idea what i am doing wrong. My request finishes well but the $_POST is empty! Except if i set "Content-type: application/x-www-form-urlencoded". But "text/plain" or "application/json" gives no result in $_POST... Why?

    xhr.open("POST", "http://localhost/index.php", true);
    xhr.setRequestHeader("Content-Type", "application/json");
    xhr.onreadystatechange = handler;
    xhr.send({'a':'12'});

I am trying to make request with XMLHttpRequest from file://example.html to http://localhost/index.php. I read a lot about CORS(in this case origin is null, this is OK.) and i have no idea what i am doing wrong. My request finishes well but the $_POST is empty! Except if i set "Content-type: application/x-www-form-urlencoded". But "text/plain" or "application/json" gives no result in $_POST... Why?

    xhr.open("POST", "http://localhost/index.php", true);
    xhr.setRequestHeader("Content-Type", "application/json");
    xhr.onreadystatechange = handler;
    xhr.send({'a':'12'});

• javascript
• php
• cors

2 Answers 2

You are probably doing one of these two things wrong:

If the content-type is not application/x-www-form-urlencoded, CORS must send a preflight request. That means that the browser will send before doing the POST request an OPTIONS request, which is used to determine if the POST request is allowed. Take a look here how this works.

Secondly, if you use xhr.setRequestHeader("Content-Type", "application/json"), the $_POST parameters will not be filled with parameters, this is only the case for application/x-www-form-urlencoded. To get the JSON you send, you will have to do:

<?php
  $input = json_decode(file_get_contents("php://input"), true);
  echo $input['a']; //echoes: 12

For more info, see this question.

Furthermore, if you go into the debugging facilities of any decent browser, it will create an error message if the CORS request is not allowed, please be sure to check if the CORS request was actually made by the browser.

I hope this helps you.

plementing @user23127 response

server side should have something like this to respond to the OPTIONS preflight request:

if (request.method === 'OPTIONS') {
  htmlRes = HttpResponse()
  htmlRes['Access-Control-Allow-Origin']='*' // or your not origin domain
  htmlRes['Access-Control-Allow-Methods']='*' // or POST, GET, PUT, DELETE
  htmlRes['Access-Control-Allow-Headers']='*' // Content-Type, X-REQUEST
}
// the rest of the code as if it was not a CORS request