Firefox does not allow cross domain Ajax GET request with Prototype js library

Question

I am trying to do a cross domain ajax request and populate the contents into a DIV in my JSP page, the javascript method I am using is as follows,

function fetchImgLeads(){
        var myAjax =  new Ajax.Request(
                    'http://someotherdomain:8080/imghtml?img=100',
                    {   method:'GET', 
                        parameters:{},
                        requestHeaders :["Access-Control-Allow-Origin","*","Access-Control-Allow-Methods","POST, GET, OPTIONS","Access-Control-Allow-Headers", "X-PINGOTHER","Access-Control-Max-Age","1728000"],
                        onSuccess:function(t){
                            alert(t.responseText.trim());
                            $('imagediv').update(t.responseText);
                        }, 
                        onFailure:function(t){
                            //do something
                        }
                    }
                );  
    }

I am calling this on load and I see an error that says HTTP/1.1 401 Unauthorized in the Firefox web console. The same thing works fine in IE. I am using IE 8.0 and Firefox 8 for this.

Apart from the requestHeaders, Is there something else I have to add?

The Http Headers captured are as follows, even then the ajax request does not seem to be working,

OPTIONS http://www.google.com/ HTTP/1.1
Host: www.google.com
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:8.0) Gecko/20100101 Firefox/8.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip, deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Proxy-Connection: keep-alive
Origin: http://localhost:8080
Access-Control-Request-Method: GET
Access-Control-Request-Headers: access-control-allow-headers,access-control-allow-methods,access-control-allow-origin,access-control-max-age,x-prototype-version,x-requested-with

HTTP/1.1 405 Method Not Allowed
Content-Type: text/html; charset=UTF-8
Date: Fri, 25 Nov 2011 05:53:54 GMT
Server: GFE/2.0
Content-Length: 11819
Proxy-Connection: Keep-Alive
Connection: Keep-Alive

score 0 · Answer 1 · answered May 08 '13 at 15:11

You are trying to send 'Access-Control-Allow-*' headers with request.

Instead you server should reply with these headers.

CORS (preflight) works this way:

Browser asks from server permission to send request: Access-Control-Request-* headers (Browser adds them automatically when you try to do cross domain request)
Server responds with Access-Control-Allow-* headers making browser know if it is allowed to send real request

Curl command should show you something like that:

curl -v -H 'Origin: http://myserver' -X OPTIONS -H 'Access-Control-Request-Methods: GET' -H 'Access-Control-Request-Headers: X-Requested-With' http://someotherdomain:8080/imghtml?img=100

* Connected to someotherdomain port 8080 (#0)
> OPTIONS /imghtml?img=100 HTTP/1.1
> User-Agent: curl/7.30.0
> Host: someotherdomain:8080
> Accept: */*
> Origin: http://myserver
> Access-Control-Request-Methods: GET
> Access-Control-Request-Headers: X-Requested-With
> 
< HTTP/1.1 200 OK
< Date: Wed, 08 May 2013 14:34:45 GMT
< Access-Control-Allow-Origin: *
< Access-Control-Allow-Headers: X-Requested-With
< Access-Control-Allow-Methods: GET
< Access-Control-Max-Age: 86400
< Content-Length: 0
< Content-Type: text/plain
< 
* Connection #0 to host someotherdomain left intact

If you are not interested in sending any custom headers to server. Then just drop Access-Control-Allow-Headers: line

ilyavf · Answer 2 · 2011-11-25T19:05:53.867

i am facing the same issue.

This is what i found out about it so far:

https://developer.mozilla.org/En/Using_XMLHttpRequest

(Versions of Firefox prior to Firefox 3 allowed you to set the preference capability.policy..XMLHttpRequest.open to allAccess to give specific sites cross-site access. This is no longer supported.)

The recommended way to enable cross-site scripting is to use the Access-Control-Allow-Origin HTTP header in the response to the XMLHttpRequest.

http://en.wikipedia.org/wiki/XMLHttpRequest#Cross-domain_requests

Headers added to a server's HTTP response headers can allow cross-domain requests to succeed. For example, Access-Control-Allow-Origin: *, can allow all domains to access a server. Access-Control-Allow-Origin can be used in all browsers that support cross-domain requests, which includes Internet Explorer 8. The W3C's specification is defined in Cross-Origin Resource Sharing.

Hope this will help...

I am already adding the Access-Control-Allow-Origin in the request headers, its fine with IE8 it is not working with Firefox — Abhishek, Nov 28 '11 at 03:50

Firefox does not allow cross domain Ajax GET request with Prototype js library

2 Answers2