Skip to Content

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:

/wp-content/uploads/2013/04/xampp_taskbar_204788.png

Double click on that icon to open XAMPP Control panel which looks like this:

/wp-content/uploads/2013/04/xampp_control_panel_204789.png

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)

/wp-content/uploads/2013/04/xampp_cp_httpd_204804.png

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 🙂 . 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:

/wp-content/uploads/2013/04/httpdconf_204805.png

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:

     /wp-content/uploads/2013/04/httpd_listen_204809.png

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

        /wp-content/uploads/2013/04/xampp_hp_204810.png

  • 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.
    /wp-content/uploads/2013/04/load_module_204811.png

          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

        /wp-content/uploads/2013/04/xampp_apache_stop_204827.png
           /wp-content/uploads/2013/04/xampp_apache_start_204828.png

  • 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:
    serviceResult.png

          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.

         
       

To report this post you need to login first.

15 Comments

You must be Logged on to comment or reply to a post.

  1. Antony FERMINUS

    Hi Ran,

    Thanks for the great article. It solved my reverse proxy problem too.

    I have one question.

    When i use IE the result is coming in the table nicely. But in Chrome the data is comming bellow the table.

    Is that an issue with SAPUI5?

    Thanks in advance.

    Antony.

    (0) 
  2. Antony FERMINUS

    Hi Ran,

    It is antony again.

    I solved the probelem. I forgot to remove the port number.

    Now everythin is working fine.

    Thanks for your great blog.

    It saved a lot of my time and stress.

    Regards,

    Antony.

    (0) 
  3. Andre Fischer

    Hi Ran,

    a very useful blog.

    Used it to configure the portable version of XAMPP.

    http://www.apachefriends.org/en/xampp-windows.html#646

    First I ran into errors when trying to start Apache. Trying to change the port numbers did not help…

    Only after reading the installation guide a second time I noticed that you do not only have to unpack the files but have to run a setup script or use the installer. (see below)

    Method B: “Installation” without the Installer 

    Unzip the zip archives into the folder of your choice. XAMPP is extracting to the subdirectory “[Ziel]\xampp” below the selected target directory. Now start the file “setup_xampp.bat”, to adjust the XAMPP configuration to your system.

    If you choose a root directory “C:\” as target, you must not start “setup_xampp.bat”.

    Like with the installer version, you can now use the “XAMPP Control Panel” for additional tasks.

    (0) 
  4. Rakesh Kumar

    Hi Ran,

    Really appreciate your work here…simple and lucid, For some one like me , who is relatively new to SAP, these kind of work only helps one to get through the basic concepts in many different areas of SAP.

    Thanks,

    Rakesh

    (0) 
  5. Oliver Unknown

    Hi Ran,

    is it possible to get a working example with an Apache as Reverse Proxy when the backend (SAP Netweaver Application Server) requires Client Certificate Authentication?

    I couldn’t get it to work by forwarding the Client Cert in the Header by using

    RequestHeader set SSL_CLIENT_S_DN “%{SSL_CLIENT_S_DN}s”

    RequestHeader set SSL_CLIENT_I_DN “%{SSL_CLIENT_I_DN}s”

    RequestHeader set SSL_SERVER_S_DN_OU “%{SSL_SERVER_S_DN_OU}s”

    RequestHeader set SSL_CLIENT_VERIFY “%{SSL_CLIENT_VERIFY}s”

    which works well when the backend also is an Apache.

    Thanks,

    Oliver

    (0) 
  6. R S R K V PRASAD

    Hello Ran,

    Merry Christmas!!

    I followed your article

    Configuring an Apache reverse proxy for consuming UI5/HTML5 applications.

    It was very nice. Even novice people like me can easily understand.

    I have done reverse proxy as explained by you.

    I am able to run the GW service successfully in the web service.

    You mentioned below point

    Don’t forget to store the application on your Apache server.(inside the htdocs library).

    Can you please tell me how to do this?

    I skipped the above step and tried in Tomcat server the same

    I am using Tomcat  as webserver in port 8080 and Apache in port 8000

    When I ran in the application in Firefox browser in Tomcat server http://<hostname&gt;:8080/SearchOrders_gold/ I got the below error.

    Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://<hostname&gt;:8000/sap/opu/odata/sap/ZMOBILEORDERSEARCH_SRV/$metadata. This can be fixed by moving the resource to the same domain or enabling CORS.

    Thanks,

    Siva

    (0) 
  7. Roshan Jalgaonkar

    Hello Ran,

    Thanks for such a helpful article.

    I have an query, I am getting proper response for most of my gateway services,

    but for 2 of service I am getting an error such as Object not found,The requested URL was not found on this server.If you entered the URL manually please check your spelling and try again.

    And I am getting this error only when I am on xamp server.

    When I execute my application from eclipse on localhost, it is executing fine.

    Help is appreciated

    Thanks and Regards

    Roshan Jalgaonkar

    (0) 
  8. John Steimle

    Hi Ran,

    Thank you for the article it is very helpful, we are looking to access the gateway from the internet and my company does not allow non-authenticated traffic on our corporate network. This solution appears to reverse proxy(forward the Http traffic) to the Gate Way and the authentication would occur at the gate way which would allow non-authenticated traffic on our internal network. Is there a way to authenticate the user at the reverse proxy server sitting a dmz and pass the credentials on to the SAP Gateway?

    Thank you for your thoughts on this question,

    John

    (0) 
  9. Roshan Jalgaonkar

    Hello Ran,

    Thanks for such a helpful article.

    The reverse proxy works perfectly fine on xampp apache server.

    But my question is related to IIS (Internet Information Server). I am getting reverse proxy issue in it.

    I need configuration of reverse proxy in IIS.

    Help is appreciated


    Thanks and Regards

    Roshan Jalgaonkar


    (0) 

Leave a Reply