Hi ,
In this blog post i will show how easily you can configure a reverse proxy in order to consume UI5/HTML5 gateway based applications.
In order to understand why we need a reverse proxy when consuming api's from different servers please refer to the following article:
https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS
So... Let's get started:
1. AMP (Apache, MySQL and PHP)
First let's download the AMP software bundle which refers to the first letters of Apache, MySQL, PHP.
Even if you are not going to use PHP or MySQL it is recommended to download it because AMP also contains a very good control panel which allows you to easily start/stop/restart or change the configuration of each of the installed packages and we will need it in order to change the Apache configurations.
AMP package is available for all OS (Linux, Mac OS X and Windows) but this user guide refer only to MAC OS X and Windows.
Because we can work in a cross-platform environment this user guide examples will be on the XAMP package.
All the screen captures of this user guide have been taken on the Windows environment.
Download XAMPP For Windows from: http://www.apachefriends.org/en/xampp-windows.html
Download XAMPP For Mac Os X from: http://www.apachefriends.org/en/xampp-macosx.html
Open and install XAMPP on your machine and than search for XAMPP and click to start it.
After you start XAMPP you will see under the task bar the following icon:
Double click on that icon to open XAMPP Control panel which looks like this:
Using the control its very easy to get the status on all of the services , start/stop services, change configuration and see log files.
2. Apache Configuration
In this user guide our focus will be only on the Apache web server.
Our Apache web server will act like a reverse proxy. We need to configure the reverse proxy in order to avoid CORS (as described in the attached article).
In order to do it we will need to change the Apache default configurations. These configurations are saved in a file with the name httpd.conf. There you can find different rules which apply on the web server as soon as it started (e.g. security rules, ports , modules and so on).
The httpd.conf is a regular text file which you can edit using notepad. When editing this file and save it you will need to restart the Apache server in order to apply those changes.
Using XAMPP control panel you can easily change the configuration file by clicking on the Config button of the Apache line and from the drop menu select the
first option which is: Apache (httpd.conf)
After clicking on that button notepad will open with the Apache configurations.
You will see there a lot of lines so please don't panic :smile: . We will do only very minor changes to this file, will save those changes and restart the web server.
The file (at least the beginning) should look like this:
It's very important to know that # means that this row is commented so all the rows with # are not executed when the web server starts only the ones without.
3. Changing Apache Configuration
Now you are ready to change the server configurations.
Because rows with # are not applied, the only row that is relevant is the last one. You can change it to any number... usually it's 8000 or 8080 but i it is recommended 8000 because 8080 is the default port of the Tomcat web server.
After you change it you can test it via the browser by navigating to http://localhost:{port_number}
If the port is 80 you can drop it, otherwise it must be specified in the URL.
If everything is OK you will be automatically redirected to the XAMPP homepage (because these are the XAMPP default configurations).
We need to make sure that the following modules are active and if one of them is not active we need to activate it (by deleting the # at the beginning of the row):
ProxyPass /sap/ http://{gateway_host}:{gateway_port}/sap/
ProxyPassReverse /sap/ http://{gateway_host}:{gateway_port}/sap/
Explanation: After that those changes will apply on the web server each time that you will navigate to your web server with the following URL:
http://{your_web_server_host}:{your_web_server_port}/sap/.....
The web server will automatically redirect you the the Gateway server (the one that you specified after the ProxyPass/ProxyPassReverse commands).
Now why are we avoiding CORS in this case? Because we are navigating to our own host and the UI5/HTML5 application is hosted in our web server so in this way we are avoiding CORS (cross domains) issues.
It's very important to know that if you want the application to work, you must specify your machine host name (where the XAMPP is installed) and not use the localhost domain because if we will use it the domain will be different and we will get the CORS error. In order to know what is your host name navigate to: Start -> Run ->cmd and in the shell write hostname and then you will see the host name.
Now just copy it and put it in the URL together with the port.
4. Check that everything is working
We did some changes to the default configurations of our Apache and now it's time to check that everything is working as expected!
Notice
I navigated to my host name but the response that i got is an ODATA service document from gateway
That's it. After your reverse proxy is ready your can start to develop your UI5 application and don't forget to store the application on your Apache server.
(inside the htdocs library). And when you execute requests to get data you will use the http://{your_hostname}:{port}/sap/.... URL inside your application and because your application is hosted on your host and you access also to your host from the application you will not get any CORS errors.
Hope that you enjoyed to read this user guide and if you have any question please do not hesitate to send me an email to mailto:ran.hassid@sap.com
Good Luck!
Ran.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
38 | |
19 | |
14 | |
12 | |
10 | |
10 | |
10 | |
8 | |
8 | |
8 |