This tutorial is focused on the development of a CRUD & RESTful web application with MSSQL and ANGULAR-JS. .
Part 4 - Cross-origin resource sharing and usage of Access-control-allow-origin. A production test bed.
Node.js is a very cool platform to seriously consider our enterprise projects.
I have tried a lot of libraries to find an optimal setup to develop an enterprise application. This tutorial will guide you in the implementation in a strong and easily reusable platform.
[ Part 1 ] [ Part 2 ] [ Part 3 ] [ Part 4 ]
How to set up a production environment
CORS and Access-Control-Allow-Origin
The examples seen in Part 1 and Part 2 are not usable in a production environment. Start with:
- Open core/server.js. You can see, on the top, the row:
- resp.setHeader("Access-control-allow-origin", "*");
- Comment it, stop the data-server (app.js) and then start it. If we browse:
- http://127.0.0.1:8080
No films are listed. Why?
In our test environment, we have two http server one is the web sever and respond on port 8000 and, the second one, is the data server and operates on port 8000. They are two different servers that reside in the same host. In a real environment, it's possible that the two servers operate in different hosts and they can also reside on different locations and/or domains.
This has a strong impacts in the security of our application. The methods GET, PUT, POST and DELETE of our data-server may be called from a hostile application that, for example, get - every day - the list of our films and then deletes them.
We need to manage the security and we can:
- apply authentication (the next post is about it);
- permit only to our web server to request data operation by methods GET, PUT, POST and DELETE;
By default Cross-Domain AJAX requests are forbidden. This is right when we need to assure that only our MovieApp can interact with the data-server.
Sometime it's possible that we need different rules. For example, if we need to implement a new application to permit to everyone to access to our meteo-data, we can host an AJAX data service as public service available to every web server. In this case we can use exactly the same command that we have commented first:
resp.setHeader("Access-control-allow-origin", "*");
It means: permit to every web site (or every web client) to consume our data-service.
Coming back to our MoviesApp, we have commented this row, so we have negate access to a different domain (in our example: different port). This because, without an explicit permission, it's applied the default rules of CORS (Cross-Origin resource sharing) that negate access to an AJAX request. We can see it live! With our Chrome Browser activate the menu MoreTools>DeveloperTool. We can see that in the console appear an error:
It says that the component XMLHttpRequest cannot access to our data service due it declares that our MovieApp web server is not allowed to access. Note that in the last row of the list of Network tab, the request for movies declare 200: there is not an http error! The data server respond correctly, but Chrome rises a CORS exception.
The test bed
It's time to simulate a production environment:
- open a text-editor as administrator;
- edit the hosts file (c:\windows\system32\drivers\etc), adding the following three rows:
- 127.0.0.1 www.mymoviesapp.com
- 127.0.0.1 www2.mymoviesapp.com
- 127.0.0.1 jsondata.mymoviesapp.com
- save it and verify whit the ping command that the three addresses are resolved correctly;
- now edit the file public/js/service.js and search/replace "http://127.0.0.1" with "http://jsondata.mymoviesapp.com". So we tell to MovieApp to obtain JSON data services from jsondata.mymoviesapp.com;
- now open the file core/sever.js and configure the data server to accept JSON requests from www.mymoviesapp.com. Modify, on the top of the code, so:
- resp.setHeader("Access-Control-Allow-Origin", "http://www.mymoviesapp.com:8080");
- restart our two node.js http servers
Now we can see that MoviesApp is working again. This environment setup uses Web and Data services in:
- two different hosts an location (simulated: in my environment they co-exist in the same physical PC, but you can try to separate them in two real physical environments);
- two different domains;
- two different ports.
In Internet there are a lot of very-simplified examples using the technologies used in this tutorial: node.js, Angular.js, MSSQL, etc. Following this post we have seen that when we try to implement them in a real production environment we must consider some different aspect to make a working app. We have seen what is "Access-Control-Allow-Origin" and how it may be set up. Googling technical forums you can see a lot of people that can't run node.js application due CORS constrains.... Cross-Origin resource sharing is not a complication, but a useful mechanism to help us to write reliable application with node.js.
