CORS ISSUE - IONIC 5 Cordova 9 - web api PHP

Ionic Framework
1

I’ve issue with cors, i tried a lot of suggestions from web but not a success.

I’m greatifully for a help.

My code.

excluirUsuario(email: any) {

console.log("delete");

const headersJson = new HttpHeaders().set('Content-Type', 'application/json');

let url = "http://localhost/project2MJA/usuarios/excluirUsuario.php"

this.httpClient.request('delete',url,{
  headers : headersJson,
  body : "{email : 'suebarth@hotmail.com'}"
})
.subscribe(
          res => {
      // Ok
      alert("ok");
}, err => 
{
      // Error ops 
      alert("erro");  });

The error:

Access to XMLHttpRequest at ‘http://localhost/project2MJA/usuarios/excluirUsuario.php’ from origin ‘http://localhost:8100’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: It does not have HTTP ok status.

Thanks a lot,

Barth

2

Did you add headers in your PHP code?

3

Yes, see my headers:

// headers
header(“Access-Control-Allow-Origin: *”);
header(“Content-Type: application/json; charset=UTF-8”);
header(“Access-Control-Allow-Methods: DELETE”);
header(“Access-Control-Max-Age: 3600”);
header(“Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With”);

4

You cannot use wildcard “Access-Control-Allow-Origin” and Authorization in “Access-Control-Allow-Headers”.

But since you used * anyway you can fudge this:

header(‘Access-Control-Allow-Origin:’ . $_SERVER[‘HTTP_ORIGIN’]);

This is the preflight request, so if you take a look at your logs, your will see this is an OPTIONS request prior to the actual “DELETE” request. Its this OPTIONS request that returns what will and wont be allowed.

Not best practice, but should help you along the way:

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

    header('Access-Control-Allow-Origin:' . $_SERVER['HTTP_ORIGIN']);
    header('Access-Control-Allow-Methods: GET,POST,OPTIONS');
    header('Access-Control-Allow-Headers: Content-Type, Authorization');

} else {
     /*    
         Do Actual Request here. Ensure you understand implications and have checks inplace. 
         Use at own risk. Trespassers with be shot. Danger! Live Mine field
    */
}
2 Likes
5

It’s interesting that you didn’t use the ordinary delete method of HttpClient, instead rolling your own with custom content types and manual JSON stringifying. I suspect that’s because HttpClient's delete doesn’t take a body.

There’s a very good reason for that. Resources to be deleted must be completely specified by the URL. Bodies in DELETE requests “have no defined semantics”, which is RFC-speak for “don’t rely on this”. Even in a case like this where you control the backend, it’s important to adhere to HTTP standards. You never know when your requests are going to go through a server or a proxy that drops DELETE bodies on the floor.

1 Like
6

+10!
Drowning pool lyrics will now never be the same for me!

@rapropos - I must admit to seeing CORS issue, and had a snippet to “make it work”.
I completely agree, use the functionality provided if possible and avoid pitfalls and un-knows.