Cross Origin Resource Sharing with PrototypeJS

Question

I am facing a common issue CORS with Prototype Ajax request. I Googled for about 2 hours, and still I am not able to fix the issue. I tried a different approach. Nothing helped me. I need to set orgin, Access-Control-Allow-Origin, etc. in my code. I referred to the following sites, but they were of no help.

http://kourge.net/node/131

new Ajax.Request("http://localhost:4000/somefolder/some.xml", {
    //new Ajax.Request(source, {
        asynchronous: false,
        method: 'get',
        contentType: 'text/xml',
        //requestHeaders: ('Access-Control-Allow-Origin', '*','Access-Control-Allow-Methods','GET','Access-Control-Max-Age','1000','Access-Control-Allow-Headers','*' ),
        //requestHeaders: (Access-Control-Allow-Origin, *,Access-Control-Allow-Methods,GET,Access-Control-Max-Age,1000,Access-Control-Allow-Headers,*),
        //onCreate: function(request) { 
        //   request.transport.setRequestHeader = Prototype.emptyFunction; 
    // },
    requestHeaders: {Access: '*/*'},
    onSuccess: function(result) {   
        alert(result.responseXML);
    }
});

And I'm getting the following response:

Response Headersview source
Connection  keep-alive
Content-Length  0
Content-Type    text/html; charset=utf-8
Date    Thu, 05 Jul 2012 08:58:08 GMT
X-Powered-By    Express
Request Headersview source
Accept  text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Encoding gzip, deflate
Accept-Language en-us,en;q=0.5
Access-Control-Request-He...    x-prototype-version,x-requested-with
Access-Control-Request-Me...    GET
Connection  keep-alive
Host    localhost:4000
Origin  http://localhost:8080
User-Agent  Mozilla/5.0 (Windows NT 5.1; rv:14.0) Gecko/20100101 Firefox/14.0

I am sending it as a GET request, but it's going as an OPTIONS request.

I added the header in response also. Still no help.

app.configure('development', function() {
    app.use(express.errorHandler( {
        dumpExceptions :true,
        showStack :true
    }));
    app.all('*', function(req, res, next) { 
        res.setHeader('Access-Control-Allow-Origin', 'http://localhost:4000, http://localhost:8000');
        res.setHeader('Access-Control-Allow-Methods', 'GET,POST,PUT,DELETE');
        res.setHeader('Access-Control-Allow-Headers', 'x-prototype-version,x-requested-with');
        res.setHeader('Accept', 'text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8');
        res.setHeader('Accept-Encoding', 'gzip, deflate');
        res.setHeader('Accept-Language', 'en-us,en;q=0.5');
        res.setHeader("X-Requested-With", "XMLHttpRequest" );
        res.setHeader("Orgin", 'http://localhost:4000'); 
        next()
    });
});

The added/reflected response:

Response Headersview source

Accept  text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Encoding gzip, deflate
Accept-Language en-us,en;q=0.5
Access-Control-Allow-Head...    x-prototype-version,x-requested-with
Access-Control-Allow-Meth...    GET,POST,PUT,DELETE
Access-Control-Allow-Orig...    http://localhost:4000, http://localhost:8000
Allow   GET,POST,PUT,DELETE,TRACE,CONNECT,PROPFIND,PROPPATCH,MKCOL,COPY,MOVE,LOCK,UNLOCK,VERSION-CONTROL,REPORT,CHECKOUT,CHECKIN,UNCHECKOUT,MKWORKSPACE,UPDATE,LABEL,MERGE,BASELINE-CONTROL,MKACTIVITY,ORDERPATCH,ACL,SEARCH,PATCH,PURGE
Connection  keep-alive
Content-Length  224
Content-Type    text/html; charset=utf-8
Date    Fri, 06 Jul 2012 06:20:51 GMT
Orgin   http://localhost:4000
X-Powered-By    Express
X-Requested-With    XMLHttpRequest

Request Headersview source

Accept  text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Encoding gzip, deflate
Accept-Language en-us,en;q=0.5
Access-Control-Request-He...    x-prototype-version,x-requested-with
Access-Control-Request-Me...    GET
Connection  keep-alive
Host    localhost:4000
Origin  http://localhost:8080
User-Agent  Mozilla/5.0 (Windows NT 5.1; rv:14.0) Gecko/20100101 Firefox/14.0

What else can I do to fix this issue?

score 1 · Accepted Answer · answered Jul 05 '12 at 15:53

1

Access-Control-Allow-Origin: * needs to be part of the response header, not the request header (your Ajax request).

The server your requesting the data from is what grants/denies permission from cross-domain scripts.

I'd look into how to set Access-Control-Allow-Origin for whatever server environment you're using.

answered Jul 05 '12 at 15:53

dontGoPlastic

1,772
14
22

My application (request/orgin server) is running in Tomcat in 8000 port. The above xml is a static file which is deliver by node+express (respondin server/host) in 3000 port. It is just comming from static path i.e from public folder of express folder structure. – Jak Jul 06 '12 at 04:38
I found the solution. Simply changed the Prototype Ajax call to jQuery Ajax call. and added "crossDomain: true," – Jak Aug 14 '12 at 05:58
If... - you want to continue using Prototype framework - and you have configured Access-Control-Allow-Origin on your server, allowing CORS requests, ... There is a solution: http://stackoverflow.com/a/15300045/408872 – Katapofatico Mar 08 '13 at 17:47

Cross Origin Resource Sharing with PrototypeJS

1 Answers1