1

I'm trying to make an XMLHttpRequest to retrieve an XML document located on a remote server. The application I'm developing will eventually be hosted on the same server that the request needs to access, though at the moment I'm developing it from another location. When I make the request from Javascript, I receive an error stating: 

XMLHttpRequest cannot load [url] No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

Many similar questions have been posted here already (such as here) regarding this and the general solution seems to be making modifications to the server to add additional headers to allow external access. However in my current situation, modifying the server is not an option so I am wondering if there is any other client-side workaround I can implement to complete this request. If possible I would like to be able to find a solution without using jQuery.

Here is the code I'm using to make the request:

var request = new XMLHttpRequest();
request.open("GET", url, true);
request.onreadystatechange = function () {
    responseHandler(request);
};
request.send(null);

For the moment I came up with a workaround using a PHP proxy to make the request (so my Javascript call goes to the locally-hosted PHP script, which then retrieves the XML file from the server) because PHP does not seem to enforce this access control policy like Javascript does. In PHP, I make the request like this:

header('Content-type: application/xml');
header("Access-Control-Allow-Origin: *");
echo file_get_contents($url);

I had to add the headers on the PHP proxy so that I can test the application on multiple devices running on my local network.

Any suggestions would be much appreciated.

Community
  • 1
  • 1
Hybrid System
  • 798
  • 12
  • 25
  • 2
    Your proxy solution is your only choice. If it's running on your server that serves the page making the request, you don't need the access control headers. They're only necessary when you expect (and want to allow) requests from *different* domains. – Pointy Jan 16 '14 at 15:10
  • The headers won't hurt anything however. – Pointy Jan 16 '14 at 15:24
  • I added the headers to the PHP proxy so that I could test the Javascript application on multiple mobile devices on my local network (all of them then connect to the PHP proxy running on my desktop computer). So because of that the requests do actually come from different domains as far as the proxy is concerned. – Hybrid System Jan 16 '14 at 15:24

1 Answers1

1

A server-side proxy -- like the one you've implemented in your question -- is the only solution here.

Note that proxied requests will not be performed with the user's authentication cookies. For example, trying to use a proxy to fetch mail.google.com will fetch the GMail login page, rather than the user's inbox. This security feature is closely tied to the reason that the same-origin policy exists (i.e., it disallows a page on origin A from using credentials from origin B to fetch pages from origin B).

You could alternatively have the user install a browser plugin, which would not be subject to the SOP. Such a plugin could perform cross-origin requests (usually with credentials) and then communicate the results to the web page. This is likely to be a terrible solution, since it requires your users to install software in order to use your website.

apsillers
  • 112,806
  • 17
  • 235
  • 239
  • After investigating this for a decent amount of time it would seem that you're right and I don't have any other options. Thanks for the input. – Hybrid System Mar 05 '14 at 07:30