Request method is OPTIONS instead of post (existing StackExchange post doens't help)

Question

Before you say there's another post ( jQuery $.ajax(), $.post sending "OPTIONS" as REQUEST_METHOD in Firefox ), yeah, it doens't help at all, so..

I am using Chrome dev latest version and when I try to send a file to a remote video converter service's API like this, it works (everything is in coffeescript) Let's call this code 1:

  json_string = getNewSignedParams()

  xhr = new XMLHttpRequest
  xhr.open('POST', some_url, true)
  xhr.setRequestHeader("Cache-Control", "no-cache")
  xhr.setRequestHeader("Content-Type", "application/octet-stream")
  xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest")
  xhr.setRequestHeader("X-File-Name", some_file.name || some_file.fileName)
  xhr.setRequestHeader("X-Query-Params", json_string)

  xhr.send some_file

The above returns a 200 and just works. But I have jQuery on the page, so I thought I'll use it so I have a jQuery version of the above like this. And let's call this code 2:

  $.ajax
    url:  some_url
    type: 'post'
    data: some_file
    processData: false 
    beforeSend: (xhr) ->
      xhr.setRequestHeader("Cache-Control", "no-cache")
      xhr.setRequestHeader("Content-Type", "application/octet-stream")
      xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest")
      xhr.setRequestHeader("X-File-Name", some_file.name || some_file.fileName)
      xhr.setRequestHeader("X-Query-Params", json_string)
    success: ->
      console.log 'success'

I get this 400 (Bad Request), saying Origin http://127.0.0.1:3000 is not allowed by Access-Control-Allow-Origin.

But get this, if I uncomment code 1 and comment out code 2 and refresh the page and upload a file, which will be successful, and comment out code 1 and uncomment code 2 and refresh the page and upload a file, NOW code 2 won't throw that 400 Bad request error!!

But if I close the entire browser, and load the page which is using code 2, uploading a file will get me the 400 error no matter how many times I try. Then if I do what the previous paragraph describes, code 2 will work!

And one more thing, the Network log in the Chrome console says that the requests I make with code 2 have "OPTIONS" as the request method. Whereas in code 1, the request method is "POST"

Does anyone know what's going on here?

Answer 1

This seems to be a cross-site-scripting problem: The url might actually be the problem. The url is probably on a different host than the script that makes the request. Browsers dont allow that for security reasons.