5

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?

Community
  • 1
  • 1
Nik So
  • 16,683
  • 21
  • 74
  • 108

1 Answers1

2

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.

Timo
  • 920
  • 8
  • 23
  • Then how to make this running on cross domain – Huzoor Bux Jul 10 '13 at 13:28
  • With a normal XHR, this is not possible. You could however do some hacks like loading your json data in an script tag (append it to head) and call a [JSONP](http://en.wikipedia.org/wiki/JSONP) function. – Timo Jul 12 '13 at 09:10