ADF CORS solving strategies

cancel
Showing results for 
Search instead for 
Did you mean: 

ADF CORS solving strategies

eugenio_romano
Alfresco Employee
5 8 22.1K

As described in the getting started guide, a web client developed using the Application Development Framework (ADF) works on top of the Alfresco Content Services (ACS) and Alfresco Process Services (APS), and it is deployed on a independent web server. To enable the correct interaction between the three servers (mainly between the ADF web server and the ACS/APS servers) the so called cross-origin resource sharing (CORS) must be set up.

If you don't enable the CORS you may experience cross-domain requests, notably Ajax requests, forbidden by default by the same-origin security policy. In case you are experiencing a cross-domain request, in this post are shared multiple ways to solve the issue, with different approaches and solutions. Below the full list of the suggested solutions.

  1. Configuring webpack proxy
  2. Configuring angular-cli proxy
  3. Configuring nginx proxy
  4. Enabling CORS in ACS and APS

1. Configuring webpack proxy

In this solution you are going to use the bundled http-proxy-middleware of webpack, to proxy requests to a separate, possibly external, backend server.

Let's say we have an app running on http://localhost:3000/ and we want all calls redirect with the following strategy:

To develop the solution in this scenario, open the file config/webpack.common.jsfind the devServer section and add the following content:

devServer: {
        contentBase: helpers.root('dist'),
        compress: true,
        port: 3000,
        historyApiFallback: true,
        host: '0.0.0.0',
        inline: true,
        proxy: {
            '/ecm': {
                target: {
                    host: "0.0.0.0", //127.0.0.1 for windows
                    protocol: 'http:',
                    port: 8080
                },
                pathRewrite: {
                    '^/ecm': ''
                },
                secure: false,
                changeOrigin: true
            },
            '/bpm': {
                target: {
                    host: "0.0.0.0", //127.0.0.1 for windows
                    protocol: 'http:',
                    port: 9999
                },
                pathRewrite: {
                    '^/bpm': ''
                },
                secure: false,
                changeOrigin: true
            }
        }
    },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Note if you are windows user you should use 127.0.0.1 instead of 0.0.0.0

Last check if you generated the app with the ADF app Yeoman generator check that you have the right settings in your app: 

  1. Be sure that on the top left switch you have selected only the services that you are currently use.
  2. Be sure that on the top right settigs button you have the right proxy address:

Notes:

  • With a different configuration of webpack the devServer properties could be defined in different files.

  • If you are running the App, content service or process service on different ports, change the ports accordingly to your local configuration. For further details about how to configure a webpack proxy please refer to the official documentation.  

2. Configuring angular-cli proxy

In this solution you are going to use angular-cli configurations to proxy requests to a separate, possibly external, backend server.

Let's say we have a app running on http://localhost:3000/ and we want redirect all the calls with the following strategy:

To develop the solution in this scenario, create a file next to projects package.json call it proxy.conf.json with the following content:

{
    "/ecm": {
                target: {
                    host: "0.0.0.0",
                    protocol: "http:",
                    port: 8080
                },
                pathRewrite: {
                    "^/ecm": ""
                },
                secure: false,
                changeOrigin: true
            },
    "/bpm": {
                target: {
                    host: "0.0.0.0",
                    protocol: "http:",
                    port: 9999
                },
                pathRewrite: {
                    "^/bpm": ""
                },
                secure: false,
                changeOrigin: true
            }
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Note if you are windows user you should use 127.0.0.1 instead of 0.0.0.0

run the following command to start the server with the proxy configuration:

ng serve --proxy-config proxy.conf.json --open‍‍‍‍‍‍

if you prefer you can also modify your start package.json to always use this configuration

"start": "ng serve --proxy-config proxy.conf.json --open",
‍‍‍‍‍‍‍‍‍‍‍

if you are running the App, content service or process service on different ports, change the ports accordingly your local configuration. For further details about how to configure a webpack proxy please refer to the official documentation.

3. Configuring nginx proxy

In this solution you are going to use nginx [engine x] HTTP and reverse proxy server.

Installing nginx

Most Linux distributions come with nginx available to install via your package manager and on Mac OS you can use Homebrew. If you want to install manually however you can follow the instructions on the download page. See also the specific information for windows users.

Start nginx

Start nginx using the supplied configuration in nginx.conf.

nginx -c nginx.conf

Review nginx configuration

To correctly configure nginx use the following file nginx.conf. This will host Activiti, Alfresco and the app dev framework under the same origin.

To make everything work, you have to change the address of the ECM and BPM. In the demo app you can do that clicking on the top right settings menu and change the bottom left options: ECM host and BPM host.

This configuration assumes few things:

  • Port mapping:
    • nginx entry point: 0.0.0.0:8888
    • Demo Shell: locathost:3000
    • Alfresco: locathost:8080
    • Activiti: locathost:9999

All those values can be modified at their respective location directive on the nginx.conf file.

If you want to know more on how to install and configure nginx to work with the Application Development Framework can be found here

4. Enabling CORS in Apache

Open the /conf/web.xml file from the apache folder and add this filter:

<filter>
  <filter-name>CorsFilter</filter-name>
  <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
  <init-param>
    <param-name>cors.allowed.origins</param-name>
    <param-value>URL_ALLOWED_ORIGIN</param-value>
  </init-param>
  <init-param>
    <param-name>cors.allowed.methods</param-name>
    <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
  </init-param>
  <init-param>
    <param-name>cors.allowed.headers</param-name>
    <param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
  </init-param>
  <init-param>
    <param-name>cors.exposed.headers</param-name>
    <param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value>
  </init-param>
  <init-param>
    <param-name>cors.support.credentials</param-name>
    <param-value>true</param-value>
  </init-param>
  <init-param>
    <param-name>cors.preflight.maxage</param-name>
    <param-value>10</param-value>
  </init-param>
</filter>
<filter-mapping>
  <filter-name>CorsFilter</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Note in the Configuration above you need to replace the URL_ALLOWED_ORIGIN placeholder with the right value. The cors.allowed.origins is a list of origins that are allowed to access the resource. A * can be specified to enable access to resource from any origin(Not suggested configuration). Otherwise, a whitelist of comma separated origins can be provided. Eg: http://www.your-backend-server.com

For further information about how to configure a CORS filter in apache please refer to the official documentation Apache Tomcat 9 Configuration Reference (9.0.8) - Container Provided Filters 

5. Enabling CORS in ACS and APS

If you want completely enable CORS call on your Alfresco Content Services and Alfresco Process Services, please refer to the following alfresco documents:

8 Comments
jameswu1818
Member II

Cannot find config/webpack.common.js. Where is the file? 

eugenio_romano
Alfresco Employee

You are probably in the scenario number two:

https://community.alfresco.com/community/application-development-framework/blog/2017/06/20/adf-cors-...    2. Configuring angular-cli proxy

imadb
Member II

I tried the 3 solutions and it is not working.

I created the directory "platform" in $ALF_HOME/modules and put enablecors1.0.jar in it, i also modified nginx.conf.

I am using a yeoman generated ADF 2.3.0 app, so it's normally angular-cli for me

eugenio_romano
Alfresco Employee

If you have correctly enabled the CORS in the CS you don't need to modify the proxy configuration.

  1. which is the reply that you have from the server?
  2. Are you trying to login in CS, PS or both? 
  3. Which are the options that you selected when you generated your app?
imadb
Member II

Hi,

I created an app using  "yo alfresco-adf-app". I was using both process services and content services. My repository in in a vm and this app is in localhost.

While content services was installed, Process Services wasn't. The error was

Request has been terminated Possible causes: the network is offline, Origin is not allowed by Access-Control-Allow-Origin, the page is being unloaded, etc.

I tried again with only Content Services, and it worked.

Many thanks for your kind help.

cesarista
Customer

Hi Eugenio:

Thanks for the guidelines. I think point 4 (although later clarified in the text) should be noted as "Enabling CORS in Apache Tomcat" to be distinguished from an Apache Webserver configuration, which should be somehow similar to a nginx strategy. 

Regards.

--C.

sdhanekula
Customer

Hi Eugenio,

I'm able to login to ADF application from my localhost but when I try to login from our Dev server I'm seeing the CORS error. Please find the screenshot below,

image.png
Could you please help me resolve it?

Thanks,
Saikiran

amanda_roberts
Community Manager
Community Manager

Hi @sdhanekula -

Feel free to repost this as a question in the ADF forums here

Thanks and best,

Amanda