<html><head><meta http-equiv="Content-Type" content="text/html charset=us-ascii"></head><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; "><h3 style="margin: 0px 0px 10px; padding: 0px; -webkit-font-smoothing: antialiased; cursor: text; position: relative; font-size: 18px; font-family: Helvetica, arial, freesans, clean, sans-serif; ">CORS with Aerogear.js and AG-Controller</h3><p style="margin: 0px 0px 15px; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 14px; line-height: 22px; ">from this gist:<a href="https://gist.github.com/4268092">https://gist.github.com/4268092</a></p><p style="margin: 0px 0px 15px; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 14px; line-height: 22px; ">2 things.</p><p style="margin: 15px 0px; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 14px; line-height: 22px; ">So when using aerogear.js to make a cross domain call,</p><pre style="font-size: 13px; line-height: 19px; font-family: Consolas, 'Liberation Mono', Courier, monospace; word-wrap: break-word; margin-top: 15px; margin-bottom: 15px; background-color: rgb(248, 248, 248); border: 1px solid rgb(204, 204, 204); overflow: auto; padding: 6px 10px; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; "><code style="font-size: 12px; line-height: normal; font-family: Consolas, 'Liberation Mono', Courier, monospace; margin: 0px; padding: 0px; border: none; background-color: transparent; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; ">var pipeline = AeroGear.Pipeline();
cors = pipeline.add( {
name: "cors",
settings: {
baseURL: "<a href="http://localhost:8080/aerogear-controller-demo/">http://localhost:8080/aerogear-controller-demo/</a>",
endpoint: "login/"
}
});
pipeline.pipes.cors.read({
success: function( data, xhr, thing1 ) {
console.log( data );
},
error: function( error ) {
console.log( error );
}
});
</code></pre><p style="margin: 15px 0px; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 14px; line-height: 22px; ">the initial OPTIONS request looks similar to this. Request URL:http://localhost:8080/aerogear-controller-demo/login/</p><pre style="font-size: 13px; line-height: 19px; font-family: Consolas, 'Liberation Mono', Courier, monospace; word-wrap: break-word; margin-top: 15px; margin-bottom: 15px; background-color: rgb(248, 248, 248); border: 1px solid rgb(204, 204, 204); overflow: auto; padding: 6px 10px; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; "><code style="font-size: 12px; line-height: normal; font-family: Consolas, 'Liberation Mono', Courier, monospace; margin: 0px; padding: 0px; border: none; background-color: transparent; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; ">Accept:*/*
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:origin, content-type, accept
Access-Control-Request-Method:GET
Cache-Control:max-age=0
Connection:keep-alive
Host:localhost:8080
Origin:http://localhost:8000
Pragma:no-cache
Referer:http://localhost:8000/app/cors.html
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.95 Safari/537.11
</code></pre><p style="margin: 15px 0px; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 14px; line-height: 22px; ">I just copy and pasted this from chrome dev tools.</p><p style="margin: 15px 0px; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 14px; line-height: 22px; ">Here is what the CORS config looks like in the controller demo, for those who don't want to go look it up</p><pre style="font-size: 13px; line-height: 19px; font-family: Consolas, 'Liberation Mono', Courier, monospace; word-wrap: break-word; margin-top: 15px; margin-bottom: 15px; background-color: rgb(248, 248, 248); border: 1px solid rgb(204, 204, 204); overflow: auto; padding: 6px 10px; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; "><code style="font-size: 12px; line-height: normal; font-family: Consolas, 'Liberation Mono', Courier, monospace; margin: 0px; padding: 0px; border: none; background-color: transparent; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; ">@Produces
public CorsConfiguration demoConfig() {
return CorsConfig.enableCorsSupport()
.anyOrigin()
.enableCookies()
.maxAge(20)
.enableAllRequestMethods()
.build();
}
</code></pre><p style="margin: 15px 0px; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 14px; line-height: 22px; ">So the above request will fail since it has more headers than just "origin". This brings me to my first question:</p><p style="margin: 15px 0px; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 14px; line-height: 22px; ">How do i specify more headers in this config object?, i guess in this case it would be origin, content-type, and accept</p><p style="margin: 15px 0px; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 14px; line-height: 22px; ">Now to the second part</p><p style="margin: 15px 0px; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 14px; line-height: 22px; ">I modified my local aerogear-controller to add these other headers in by default, and then ran the above request again.</p><p style="margin: 15px 0px; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 14px; line-height: 22px; ">This time i get the same OPTIONS request but then i get a cross domain error with the follow up GET that the browser makes</p><pre style="font-size: 13px; line-height: 19px; font-family: Consolas, 'Liberation Mono', Courier, monospace; word-wrap: break-word; margin-top: 15px; margin-bottom: 15px; background-color: rgb(248, 248, 248); border: 1px solid rgb(204, 204, 204); overflow: auto; padding: 6px 10px; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; "><code style="font-size: 12px; line-height: normal; font-family: Consolas, 'Liberation Mono', Courier, monospace; margin: 0px; padding: 0px; border: none; background-color: transparent; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; ">Request URL:http://localhost:8080/aerogear-controller-demo/login/
Request Headersview source
Accept:application/json, text/javascript, */*; q=0.01
Cache-Control:no-cache
Content-Type:application/json
Origin:http://localhost:8000
Pragma:no-cache
Referer:http://localhost:8000/app/cors.html
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.95 Safari/537.11
</code></pre><p style="margin: 15px 0px; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 14px; line-height: 22px; ">And i don't get any errors on the server log, so not really sure whats going on here</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 0px !important; margin-left: 0px; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 14px; line-height: 22px; ">This is the repo i was using to play around with <a href="https://github.com/lholmquist/WoWAerogear" style="color: rgb(65, 131, 196); text-decoration: initial;">https://github.com/lholmquist/WoWAerogear</a> checkout the cors.html and cors.js page</p><div><br></div><div><br></div><div>-Luke</div></body></html>