Angular: A wildcard '*' cannot be used in

I know there are a lot of questions concerning CORS already but they don't seem to answer my question.

So I have a client app written in Angular which will be used to create a mobile app (with Apache Cordova). The html files and JavaScript files will be loaded from the mobile device. When I simulate that and I send requests to the REST API server I first got "No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:82' is therefore not allowed access". So I added header("Access-Control-Allow-Origin: *"); in my php REST API Server. I cannot specify a specific domain as the requests will come from the mobile devices.

Now I got to "A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' header when the credentials flag is true."

I finally found a solution but I'm not sure it is safe to keep it like this.

In my php REST API Server I added this:

if (isset($_SERVER['HTTP_ORIGIN'])) {
   header("Access-Control-Allow-Credentials: true");
   header("Access-Control-Allow-Origin: " . $_SERVER['HTTP_ORIGIN']);
   header("Access-Control-Allow-Headers: *, X-Requested-With, Content-Type");
   header("Access-Control-Allow-Methods: GET, POST, DELETE, PUT");
}

Please advise on this way of working. If it is not secure or no good at all, can you please tell me how to solve this issue?

Thanks a lot!

Response should only have the accepted headers in Access-Control-Allow-Headers, don't use wildcard.

As far as it being safe, note the comment from @Jules in this post about CORS:

Note that sending the HTTP Origin value back as the allowed origin will allow anyone to send requests to you with cookies, thus potentially stealing a session from a user who logged into your site then viewed an attacker's page. You either want to send '*' (which will disallow cookies thus preventing session stealing) or the specific domains for which you want the site to work.

See also the following for examples:

Wildcard not accepted in Access-Control-Allow-Headers

Specify headers Access-Control-Allow-Headers

Alternative approach

You can just set the origin header to:

Access-Control-Allow-Origin: *

If you don't need to include cookies in your request remove:

Access-Control-Allow-Credentials: true

Remove the wildcard from Access-Control-Allow-Headers and add Authorization and then pass that header as part of your request for authorization, instead of passing credentials in a cookie, ex: