I decided to upload my html5 game to Facebook platform, but I have a problem with the requests to my api/server because now requests come from a different domain (https://apps.facebook.com/mygame).

I have received this error:

XMLHttpRequest cannot load https://myurl/api/login. Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response.

This is my AJAX request:

function login(token)
{

  $.ajax({
     url: 'https://myurl/api/login',
     method: 'get',
     headers: {"Authorization": "Bearer " + token},
     contentType: "application/json",
     beforeSend: function(xhr) {
       xhr.setRequestHeader("Authorization", "Bearer " + token);
     },                        
     success: function(data, textStatus, jqXHR) {
        // To next state
     },
     error: function (jqXHR, textStatus, errorThrown) {
        // Error
     }
  });
}

The requests from my server works, but from facebook it doesn't, this is my .htaccess file:

<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>

The API is done with slim framework (php) and my server is Apache. I've tried a lot of options like setting the headers in the .htaccess or in the AJAX requests, but I don't achieve it. How could I do it?