Problem with CORS - Preflight (get works, post does not)

Question

Does anyone know how I can solve this CORS problem? Because honestly I tried a lot and I could not, I already put in the backend (php) ACCESS-CONTROL-ALLOW-ORIGIN * and others, even so the error persists, only for posts:

public static function HTTPResponseSet($httpStatusCode) {
  header('Access-Control-Allow-Origin: *');
  header("Content-Type: application/json; charset=utf-8");
  http_response_code($httpStatusCode);

  // Allow from any origin
  if (isset($_SERVER['HTTP_ORIGIN'])) {
    header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
    header('Access-Control-Allow-Credentials: true');
    header('Access-Control-Max-Age: 86400');
  }

  // Access-Control headers are received during OPTIONS requests
  if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
      header("Access-Control-Allow-Methods: GET, POST, PUT, OPTIONS");         
    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
      header("Access-Control-Allow-Headers: {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");
      // header("Access-Control-Allow-Headers: X-Requested-With, Content-Type, Origin, Authorization, Accept, Client-Security-Token, Accept-Encoding");
    exit(0);
  }
}

And yes, I’m calling the function. I do other project requests on localhost and they work, but using Vue on port 8080 with Axios, and the project on localhost/project does not work.

Code request: `methods: { save() { Let client = { name: this.form.name, Description: this.form.Description, }

  axios.post('http://localhost/usios_planner/project/public/client/create', client)
  .then(response => {
    window.console.log('Ok', response)
  })
  .catch(error => {
    window.console.log('Error: ', error);
  });

  this.$store.state.clients.push(client)
  window.console.log('Client: ',client)

  this.dialog.show = true;
}

},`

Error print: https://prnt.sc/rzzb6i Error: Failed to load Resource: the server responded with a status of 422 (Unprocessable Entity) client:1 Access to Xmlhttprequest at 'http://localhost/usios_planner/project/public/client/create' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: It does not have HTTP ok status.

I’m using: PHP in backend, Vuejs in Front and Axios in Vue.

NOTE: The above code to activate CORS worked for requests I do on localhost/pasta_do_project, but on Vue (localhost:8080) I have the error in question.

Answer 1

Preflight almost always indicates what has not been configured properly, its own message:

... It does not have HTTP ok status.

The HTTP ok refers to HTTP code 200, which means that when you sent a reply to the initial request on OPTIONS was not sent with code 200, probably with another code and probably even not being POST and yes OPTIONS he is trying to execute the POST.

In Preflight always two requests will be sent:

1. The initial OPTIONS request, which is generated by the browser
2. The normal request when there is an unexpected change, such as on request headers that are not common, for example changed the content-type of Axios or $.ajax

Probably this will solve:

  if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
    http_response_code(200);

    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
      header("Access-Control-Allow-Methods: GET, POST, PUT, OPTIONS");         
    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
      header("Access-Control-Allow-Headers: {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");
      // header("Access-Control-Allow-Headers: X-Requested-With, Content-Type, Origin, Authorization, Accept, Client-Security-Token, Accept-Encoding");
    exit(0);
  }

But there is no way to affirm, because you created a whole environment of treatment of your HTTP and we do not know how the status was modified, so what I can say is that in OPTIONS always send the:

HTTP/1.1 200 OK

That in PHP you can write with http_response_code(); or with header();