/cors/index.html not correctly handling cors authentication in some browsers #176

Closed
rdbhost opened this Issue Apr 21, 2012 · 2 comments

Projects

None yet

2 participants

@rdbhost

The test app is at
http://www.paginaswww.com/rdb/test/easyxdm-test.html, and the data server is at http://dev.rdbhost.com.

It works correctly in Chrome 18.0, and Safari 5.1.2.

but not in Firefox 11.0, Opera 11.62 or IE 8.0

It is a simple app that retrieves (on load) a page via the /cors/index.html request method, and displays either the content or the error by alert(). When it fails, it fails by 'DISALLOWED_ORIGIN'.

Stepping through the debugger, it is apparent that the ajax request is not being provided with the 'Origin' header, and thus the server is not replying with the 'Access-Control-Allow-Origin' headers and the cors authentication within /cors/index.html is then failing. I tried forcing a valid 'Origin' into the header at line 75 of the index.html file, but that does not seem to work (maybe Firefox removes Origin headers it considers inapplicable?).

Are the browsers expected to add Origin headers to XHTTPRequests when the request is from the same origin, as is the case here?

Thank you, Oyvind for a fantastic product, and thank you again for any assistance you can provide me on this issue.

@rdbhost

Here is the source of the example. The cors/index.html is just a copy of the same file form easyxdm github repo.

<!doctype html>
<html>
    <head>
        <title>easyXDM</title>
        <script language="javascript" type="text/javascript"
          src="http://dev.rdbhost.com/js/easyxdm/easyXDM.debug.js"></script>
        <script type="text/javascript">
            // this is only bootstrapping code
            var REMOTE = 'http://dev.rdbhost.com';

            // this is really what you are after
            var rpc = new easyXDM.Rpc({
                local: "/static/0000000002/easyxdm/name.html",
                swf: "/js/easyxdm/easyxdm.swf",
                remote: REMOTE + "/static/0000000002/easyxdm/cors/index.html",
                remoteHelper: REMOTE + "/static/0000000002/easyxdm/name.html",
                onReady : function() {
                  rpc.request({
                      url : '/static/0000000002/easyxdm/ascii-file.txt',
                      method : "POST"
                    },
                    function(response) {
                      alert(response.data);
                    },
                    function(err) {
                      alert(err.message);
                    }
                  )
                }
            }, {
                remote: {
                    request: {}
                }
            });


        </script>
    </head>
    <body>
        <script type="text/javascript">
            document.write("Domain: " + location.host);
        </script>
        <div id="embedded">
        </div>
        <div>
            This example shows how to use easyXDM to call regular ajax/cors services (no JSONP) from remote domains.
        </div>
    </body>
</html>
@oyvindkinsey

Origin is a protected header in most browsers that natively support CORS, so you cannot use this - if you want to convey the origin then you will have to choose an alternate header, like X-Origin or similar.

The trick in this case is to abstract your code so that you use native CORS in these browsers while falling back to easyXDM only when needed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment