SPA-CORS-Concept

Objective: Objective of this document is to demonstrate how browser behaves when making a cross origin resource request.

Step 1: Go to the UI project. DynamicDataUI

Step 2: Start it

Step 3: Start the data service

Step 4:

Ensure the back end service(NodeJsPostgresDynamicData) is working. Note the url. Basically the page resides in the same module as the back end service so there is no cross site request made.

You will get lot of popups click ok on all.

http://localhost:3000/DynamicHeaderProperties

Step 5:

Ensure sorting by client works.

[TODO-Confirm]When fewer than 10 rows no call is made to the server. Watch it in the console.

Step 6: Now try the CORS on firefox.

http://localhost:8080/DynamicHeaderProperties

Error: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:3000/api/v1/invoicesMetaData?_search=false&nd=1432587205781&rows=10&page=1&sidx=c2&sord=desc. (Reason: CORS header 'Access-Control-Allow-Origin' missing).

Error from UI Server console.

maheshs-mbp-2:DynamicDataUI maheshrajannan$ node bin/www

::1 - - [25/May/2015:20:53:24 +0000] "GET /DynamicHeaderProperties HTTP/1.1" 200 12244 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:38.0) Gecko/20100101 Firefox/38.0"

::1 - - [25/May/2015:20:59:22 +0000] "GET /DynamicHeaderProperties HTTP/1.1" 200 12244 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_5) AppleWebKit/600.6.3 (KHTML, like Gecko) Version/7.1.6 Safari/537.85.15"

::1 - - [25/May/2015:20:59:23 +0000] "GET /favicon.ico HTTP/1.1" 500 1637 "http://localhost:8080/DynamicHeaderProperties" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_5) AppleWebKit/600.6.3 (KHTML, like Gecko) Version/7.1.6 Safari/537.85.15"

Error: Failed to lookup view "error" in views directory "/Users/maheshrajannan/Samples/Workspaces/nodeJs/Project/DynamicDataUI/views"

at EventEmitter.app.render (/Users/maheshrajannan/Samples/Workspaces/nodeJs/Project/DynamicDataUI/node_modules/express/lib/application.js:519:17)

at ServerResponse.res.render (/Users/maheshrajannan/Samples/Workspaces/nodeJs/Project/DynamicDataUI/node_modules/express/lib/response.js:933:7)

at /Users/maheshrajannan/Samples/Workspaces/nodeJs/Project/DynamicDataUI/app.js:51:9

at Layer.handle_error (/Users/maheshrajannan/Samples/Workspaces/nodeJs/Project/DynamicDataUI/node_modules/express/lib/router/layer.js:58:5)

at trim_prefix (/Users/maheshrajannan/Samples/Workspaces/nodeJs/Project/DynamicDataUI/node_modules/express/lib/router/index.js:300:13)

at /Users/maheshrajannan/Samples/Workspaces/nodeJs/Project/DynamicDataUI/node_modules/express/lib/router/index.js:270:7

at Function.proto.process_params (/Users/maheshrajannan/Samples/Workspaces/nodeJs/Project/DynamicDataUI/node_modules/express/lib/router/index.js:321:12)

at IncomingMessage.next (/Users/maheshrajannan/Samples/Workspaces/nodeJs/Project/DynamicDataUI/node_modules/express/lib/router/index.js:261:10)

at fn (/Users/maheshrajannan/Samples/Workspaces/nodeJs/Project/DynamicDataUI/node_modules/express/lib/response.js:928:25)

at EventEmitter.app.render (/Users/maheshrajannan/Samples/Workspaces/nodeJs/Project/DynamicDataUI/node_modules/express/lib/application.js:521:14)

Step 7:

Try the same in safari.

Step 8:

Now the fix on the UI side (DynamicHeaderProperties.html)

Step 9:

Now the fix on the server side. Basically to allow it to send jsonp requests.

Just one character change.

Res.json( to → res.jsonp(

Short Notes:

This simply means we are bypassing the security provided by the browser. It is therefore not recommended(Ref:2). What it tells the browser is this is a script and instead of executing the script, it loads the json data. The final conclusion from the article is as follows

“

These days, CORS is the recommeded approach vs. JSONRequest. JSONP is still useful for older browser support, but given the security implications, unless you have no choice CORS is the better choice.

“

Quotes from the article

“

The one item that bypasses this limitation is <script> tags. When you use a script tag, the domain limitation is ignored, but under normal circumstances, you can't really DO anything with the results, the script just gets evaluated.

Enter JSONP. When you make your request to a server that is JSONP enabled, you pass a special parameter that tells the server a little bit about your page. That way, the server is able to nicely wrap up its response in a way that your page can handle.
It's also worth noting the one major issue with JSONP: you lose a lot of control of the request. For example, there is no "nice" way to get proper failure codes back.“

Step 10:

Doing it the right way. Using fine grained CORS support, so that server can control if the request can be served or not, on the basis of specific domain.

I am working on to clean up my code and I will publish the code, after that. This is written using node js and grid is written using jqgrid.

References:

1. http://stackoverflow.com/questions/9586108/jqgrid-json-reader-for-arcgis-server-query-results/9588051#9588051
2. http://stackoverflow.com/questions/2067472/what-is-jsonp-all-about
3. https://nodejs.org/
4. The End