2

Ok, so basically. I inject some javascript code into a web page and it uploads an image on that page to another server. Now I have it working when I run it on my domain (of course), but I need to post the multipart/form-data request to a PHP file that I do not own. Since it is a upload and not a simple request to just get data, I cannot use jsonp in the initial call since the response would not be in json.

Using James Padolsey's cross domain script, I am able to do $.get and $.post request across domains, but since I am using $.ajax it does not work. He uses the Yahoo Query Language to acomplish this

This is basically how I am making the request

$.ajax({
url: 'http://website.com/upload.php',
type: 'POST',
contentType:'multipart/form-data',
data: postData,
success: successCallback,
error : function(XMLHttpRequest, textStatus, errorThrown) {
    console.log('Error');
}
});

I want to make it completely JavaScript based to avoid making my server do the request. So to re-cap, I can get the image bytes and make the request with javascript. But so far I cannot make it cross domain since I am $.ajax to set the content Type to "multipart/form-data". Is there another way to make the request cross domain with or without the YQL?

Making the request with an iframe will not work since the domain of the iframe would change and I would not have access to the response.

John
  • 5,942
  • 3
  • 42
  • 79
  • You could proxy your request to the other server through your own domain to avoid cross domain issues. Basically access the other domain on the server side and return the response – jermel Dec 17 '11 at 11:51
  • I mentioned that I do not want to use my server resources since it could use hundreds of requests a day. – John Dec 17 '11 at 11:54
  • do you absolutely NEED to access the response? – jermel Dec 17 '11 at 12:05
  • Yes, because it the return data has stats about the uploaded image that I need. – John Dec 17 '11 at 12:09

1 Answers1

3

This is a well known and difficult problem for web development, know as the Same Origin Policy

Javascript prevents access to most methods and properties to pages across different origins. The term "origin" is defined using the domain name, application layer protocol, and (in most browsers) port number of the HTML document running the script. Two resources are considered to be of the same origin if and only if all these values are exactly the same.

There are several ways around this.

  1. Create your own proxy
    • Create a page that simply forwards the request to the other server, and returns its response
    • or, Use Apache's rules to form a proxy (see above link)
  2. Use someone else's proxy
  3. See if the 3rd party conforms to the CORS specification
  4. If you are willing to allow a little flash on your page, try flXHR
    • it claims to implement the exact XHR api and also has a jquery plugin

These are pretty much your only options

Community
  • 1
  • 1
jermel
  • 2,326
  • 21
  • 19