Home » Documentation > Introduction » Cross-Origin Resource Sharing (CORS)

Modifying your web application, view(s), lookups and images to run under DF4WP

Embedding a DataFlex web application which is running on the same server as the WordPress site is relatively straightforward, however there may be many cases where this is, for one reason or another, not desirable, or even possible.  The most common reason that it will not be possible is that the great majority of WordPress sites run on Linux (or Unix) servers, which DataFlex does not.

In such cases, the DataFlex web application will have to be hosted on a server other than the one WordPress is running on.

The DataFlex web app framework makes use of AJAX technology for the JavaScript application in the browser to communicate with the DataFlex application running on the server.  This in turn uses the browser’s – now thankfully standardised – XmlHttpRequest object (XHR for short).  By deliberate design (although for reasons which can now be seen to be mistaken) the XHR is generally prohibited from making calls to a “host” (server) other than the one the page was originally loaded from (in this case, the WordPress server).  In order to overcome this restriction a standard called Cross-Origin Resource Sharing (CORS) has been developed to allow such calls to be made.  In order to use it you will need to make changes within Internet Information Services (IIS) on the server your DataFlex application is hosted on.

Using a text editor create a file containing the following XML, saving it as “web.config” in the AppHTML directory of your DataFlex web application.  (If a web.config file already exists there, add the following to it, making sure that if the section(s) involved already exist you add the custom headers to them correctly.)  The “remoteServer” entry should be replaced with the DNS hostname or IP address of the site you wish to embed the web app in (i.e. the WordPress server).  If the connection is to be over HTTPS, that should replace “http” in the “Access-Control-Allow-Origin” entry.

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin"
                value="http://remoteServer" />
        <add name="Access-Control-Allow-Headers"
                value="content-type" />
        <add name="Access-Control-Allow-Methods"
                value="GET, POST" />
        <add name="Access-Control-Allow-Credentials"
                value="true" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>
</configuration>

Then:

  1. From Start → Control Panel → Administrative Tools, launch Internet Information Services (IIS) Manager
  2. In that, navigate to the virtual directory for your DataFlex web application
  3. In “Features View” (bottom tabs) double-click on the “Handler Mappings” item
  4. In right-hand pane click on “View Ordered List”
  5. In the list, find the “OPTIONSVerbHandler” entry and select it (it will probably be close to the bottom)
  6. In the right-hand pane, click “Move Up” (click “Yes” when prompted with the warning about the list order being changed)
  7. Keep clicking “Move Up” until it is at the top of the list

Note: As stated above, in the line “<add name=”Access-Control-Allow-Origin” value=”http://remoteServer” />” the “remoteServer” text should be replaced with the DNS hostname or IP address of the WordPress server, so if the WordPress server was running under HTTPS on a machine with a DNS name of “www.superblogsite.com”, you would alter that line to read:

<add name="Access-Control-Allow-Origin" value="https://www.superblogsite.com" />  

Once this has all been done, you should be able to access your DataFlex application from WordPress pages in other hosts and domains.