{"componentChunkName":"component---src-templates-default-template-tsx","path":"/documentation/best_practices/local_reverse_proxy/","result":{"data":{"asciidoc":{"id":"206dcc62-d6c7-58eb-8b4c-ee283595d0e0","html":"
\n
Table of Contents
\n\n
\n
\n

Enabling local app development for HIRO Desktop

\n
\n
\n

The HIRO API adheres to common web security standards. For browser-based applications, the HTTPS calls and response contain various security-related header attributes according to web security best practices.

\n
\n
\n

A HIRO Desktop application is typically hosted on the HIRO server, served from the same URL (https://core.engine.datagroup.de) as the HIRO API. During local application development, the application might be launched and tested locally on the developer’s PC. In such a case, the web security header attributes would indicate to the web browser that the requests are coming from a wrong origin and would block the application. These checks need to be bypassed for local application development.

\n
\n
\n
\n
\n

Installing a local reverse proxy

\n
\n
\n

It is recommended to use a local reverse proxy to modify the header attributes, so that the application runs in the browser correctly during development. In general, any reverse proxy can be used, given that it supports modification of HTTPS header attributes. As an example, we show below how this can be done with nginx. Feel free to use another reverse proxy instead.

\n
\n
\n

Installation of nginx as reverse proxy:

\n
\n
\n
    \n
  • \n

    Download the current (either mainline or stable) nginx version for your operating system from http://nginx.org/en/download.html

    \n
    • \n
  • \n

    Unzip the nginx archive (zip or tar.gz) on your local PC

    \n
    • \n
  • \n

    Modify the nginx.conf file in the “conf” sub folder as stated below

    \n
    • \n
  • \n

    Run nginx locally (e.g. run “start nginx.exe” on Windows)

    \n
    • \n
  • \n

    Now you can the configured local URL (e.g. “http://localhost:5080/” as graph URL in your HIRO Desktop app

    \n
    • \n
\n
\n
\n

In the example below, the URL http://localhost:5080 is forwarded to https://core.engine.datagroup.de. The 'Access-Control-Allow-Origin' header attribute is set to '*' to let the browser accept the API responses. Please note that the “/_g” location needs a slightly different configuration to support websocket connections.

\n
\n
\n
nginx reverse proxy configuration
\n
\n
http {\n    include       mime.types;\n    default_type  application/octet-stream;\n    sendfile        on;\n\n    server {\n        listen       5080;\n        server_name  localhost;\n\n\t\tlocation / {\n\t\t\tproxy_pass https://core.engine.datagroup.de ;\n\t\t\tadd_header 'Access-Control-Allow-Origin' '*' always;\n\t\t\tproxy_hide_header 'Access-Control-Allow-Origin';\n\t\t}\n\n\t\tlocation /_g {\n\t\t\tproxy_pass https://core.engine.datagroup.de/_g ;\n\t\t\tproxy_hide_header 'Access-Control-Allow-Origin';\n\t\t\tproxy_http_version 1.1;\n\t\t\tproxy_set_header Upgrade $http_upgrade;\n\t\t\tproxy_set_header Connection \"Upgrade\";\n\t\t}\n    }\n}
\n
\n
\n
\n
\n
\n

Alternative: deactivate CORS check in browser

\n
\n
\n

It is recommended to use the reverse proxy method described above. If for some reason it is not possible or not desired to run a local reverse proxy, there is a workaround available to temporarily deactivate the CORS check in your web browser via a plugin.\nFor security reasons, we recommend using a second browser for this method, so that only the application under development is run without active CORS check. For example, if your main browser is Chrome, you may use Fire-fox to locally test the application, or vice versa.\nYou may use, for example, the “CORS Everywhere” plugin for Firefox. As you can see in the screenshot in Figure 1, you may (and should) limit the plugin to a whitelist of URLs. Also the plugin is by default switched off after opening the web browser; it needs to be activated by pressing a button. At the next browser restart, the plugin is inactive again.

\n
\n
\n
\n\"Screenshot\n
\n
Figure 1. Screenshot of \"CORS Everywhere\" Firefox plugin settings
\n
\n
\n
\n\"CORS\n
\n
Figure 2. CORS browaer plugin is disabled by default when the browser is opened
\n
\n
\n
","document":{"main":"Reverse Proxy for HIRO Desktop Development","title":"Reverse Proxy for HIRO Desktop Development","subtitle":""},"fields":{"toc":true,"location":["documentation","best_practices","local_reverse_proxy"]}},"sidebarYaml":{"id":"6d066bdd-c982-5a69-b909-a31e6fc044e0","showIndex":null}},"pageContext":{"id":"206dcc62-d6c7-58eb-8b4c-ee283595d0e0","parent":"documentation"}},"staticQueryHashes":["1010459453","1010459453","2356112386","2356112386","2603905930","2603905930","3026652197","3026652197","3167850324","3167850324","63159454","63159454"]}