Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
Former Member

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.

  • Windows users can install WAMP bundle (which refer to the first letters of Windows AMP)
  • Mac OS X users can install MAMP bundle (which refer to the first letters of Mac AMP)
  • Linux users can install LAMP (not relevant here but good to know)
  • Windows/MAC users can also install the XAMP package which is the cross-platform AMP

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.

  • Port - as default Apache runs on port 80 (which is the default port of HTTP). Sometimes this port is blocked by another service (e.g. IIS, Tomcat), sometimes the firewall blocks this port due to security reasons so to change the default port just press on CTRL + F and search for listen. Then you should see the following:

    

        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).

       

  • Modules - In order to use the reverse proxy we must make sure that a couple of modules are active. If they are not, we need to activate them and restart the server  to apply the changes. In the default setup not all the modules are active. The module configurations can be changed though from the AMP version to another version, so we need to make sure before defining the reverse proxy that the modules we need are active. In order to do it open the httpd.conf and search for LoadModule. Then you will see several lines of LoadModule command.  Again only those lines without # are active, so you can see that part of modules are active and part of them are not.

          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):

    • LoadModule proxy_module modules/mod_proxy.so
    • LoadModule proxy_http_module modules/mod_proxy_http.so
    • LoadModule rewrite_module modules/mod_rewrite.so

  • Reverse Proxy - After doing both changes we are ready to define the reverse proxy. Let's scroll down to where all the LoadModule commands end
    and add the following rows:

        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!

  • First restart the Apache web server in order to apply the changes by clicking on the stop button and then start again, make sure that you see a green background over the Apache text

       
          

  • Go to Start -> Run -> cmd and get your machine host name by specifying the hostname command in the shell and copy the hostname
  • Open the web browser and specify the URL: http://{hostname}:{port_number}/sap/opu/odata/iwfnd/CatalogService?$format=xml
    I choose to navigate to the CatalogService which exists on any Gateway server and active as default... but if you have another service you just need to replace the path to be
    /sap/opu/odata/{service_namespace}/{service_name}?$format=xml and click on execute.
  • If everything is OK.... Apache will recognize that the URL contains /sap/ right after the host and port and will automatically redirect you to the URL of the Gateway that was specified in the configuration file. On my machine for example i got the service document of the CATALOGSERVICE service of the Gateway that i specified and it looks like this:


          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.

         
       

16 Comments