Origin is not allowed by Access-Control-Allow-Origin for HTTP DELETE

Question

I currently playing around with the Facebook JavaScript SDK and the Scores API ( https://developers.facebook.com/docs/score/ ). I wrote a small application to save (post) scores and now I want to delete scores. Posting (saving) them works fine.

My code looks like this:

var deleteHighScoreUrl = 'https://graph.facebook.com/'+facebook.user.id+'/scores?access_token='+facebook.application.id+'|'+facebook.application.secret;

jQuery.ajax(
{
  type: 'DELETE',
  async: false,
  url: deleteHighScoreUrl,
  success: function(data, textStatus, jqXHR)
  {
    console.log('Score deleted.');
  }
});

The "facebook" variable is an object that holds my application data. For HTTP POST it works fine but for HTTP DELETE I get the response "NetworkError: 400 Bad Request" in Firebug (with Firefox 10). I saw that Firefox first sends an HTTP OPTIONS (to see if it is allowed to use HTTP DELETE) which leads to this error so I tried the same thing with Google Chrome. Google Chrome sends a real HTTP DELETE which then returns:

"XMLHttpRequest cannot load https://graph.facebook.com/USER_ID/scores?access_token=APP_ID|APP_SECRET. Origin MY_DOMAIN is not allowed by Access-Control-Allow-Origin".

I think that this is a classical cross domain issue but how to solve it? I've added my domain to my facebook application (at https://developers.facebook.com/apps) and Facebook has a paragraph which is called "Delete scores for a user". So it must be possible to delete the scores (somehow)?

Answer 1

Because of Cross-Site-Scripting (XSS) a HTTP DELETE is not possible. But you can send a HTTP POST request with the query parameter ?method=delete, which then deletes the score.

Code Sample:

Facebook.prototype.deleteUsersHighScore = function()
{
  var deleteHighScoreUrl = 'https://graph.facebook.com/'+this.user.id+'/scores?access_token='+this.application.id+'|'+this.application.secret+'&method=delete';

  jQuery.ajax(
  {
    type: 'POST',
    async: false,
    url: deleteHighScoreUrl,
    success: function(data, textStatus, jqXHR)
    {
      console.log('Score deleted.');
    }
  });
}

Answer 2

This is the Cross Domain security issue.

The fact that your error contains the message "Origin MY_DOMAIN" would tell me that somewhere in your code you have copied one of Facebook's examples but not changed the value for MY_DOMAIN to the correct domain you are using.

I would check all of your code for the value "MY_DOMAIN".

Please ignore this advice if you have changed the value to hide your actual domain in your question.