A web client built with ADF typically won't be loaded from the same web server that the Alfresco Platform is running on. This means you need to tell the Alfresco server explicitly that any request coming in from this custom web client should be allowed access to the Content Repository. This is done by enabling Cross Origin Resource Sharing (CORS).
If you are experiencing this kind of problem, use one of the following approaches, depending on your setup:
If you are using a project created with the Yeoman Generator or the demo shell (>=1.6.0), you already have
a suitable configuration out of the box in your config/webpack.common.js file.
Say we have an app running on http://localhost:3000/ and we want to redirect all calls with the following strategy:
- Content Service http://localhost:8080/ redirect to -> http://localhost:3000/ecm/
- Process Service http://localhost:9999/ redirect to -> http://localhost:3000/bpm/
Open the config/webpack.common.js file, find the devServer section and add the 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",
protocol: 'http:',
port: 8080
},
pathRewrite: {
'^/ecm': ''
}
},
'/bpm': {
target: {
host: "0.0.0.0",
protocol: 'http:',
port: 9999
},
pathRewrite: {
'^/bpm': ''
}
}
}
},Notes:
-
With a different configuration of webpack, the
devServerproperties could be in other webpack files. Search your configuration files to find the correct location. -
If you are running the App, Content Service or Process Service on different ports change the ports accordingly in your local configuration.
For further details about how to configure a webpack proxy please refer to the official documentation.
Say we have an app running on http://localhost:3000/ and we want to redirect all the calls with the following strategy:
- Content Service http://localhost:8080/ redirect to -> http://localhost:3000/ecm/
- Process Service http://localhost:9999/ redirect to -> http://localhost:3000/bpm/
Create a file next to the project's package.json, call it proxy.conf.json and add the following content:
{
'/ecm': {
target: {
host: "0.0.0.0",
protocol: 'http:',
port: 8080
},
pathRewrite: {
'^/ecm': ''
}
},
'/bpm': {
target: {
host: "0.0.0.0",
protocol: 'http:',
port: 9999
},
pathRewrite: {
'^/bpm': ''
}
}
}Note that if you are running the App, Content Service or Process Service on different ports, you should change the ports accordingly in your local configuration.
For further details about how to configure a webpack proxy please refer to the official documentation.
Most Linux distributions will come with nginx available to install via your package manager and on Mac OS you can use Homebrew.
If you want to install manually, you can follow the instructions on the download page. See also the specific information for Windows users.
Start nginx using the supplied configuration in nginx.conf
nginx -c nginx.conf
To correctly configure nginx, use the nginx.conf file in the project root folder. This will host Activiti, Alfresco and the app dev framework under the same origin.
To make everything work, you should change the address of ECM and BPM. In the demo app you can do that by clicking on the top right settings menu and changing the bottom left options: ECM host and BPM host.
This configuration assumes a few things:
- Port mapping:
- nginx entry point: 0.0.0.0:8888
- Demo Shell: localhost:3000
- Alfresco: localhost:8080
- Activiti: localhost:9999
You can modify all these values at their respective location directive in the
nginx.conf file.
See the Alfresco community page about using nginx with ADF for further information.
If you want to completely enable CORS calls in your Content Services and Process Services, please refer to the following Alfresco documents:
-
Enable Cross Origin Resource Sharing (CORS) in Alfresco Process Services
-
Enable Cross Origin Resource Sharing (CORS) in Alfresco Content Services
The easiest approach is to add the enablecors
platform module JAR to the $ALF_INSTALL_DIR/modules/platform directory and restart the server.
Note that, by default, the CORS filter that is enabled will allow any origin.
Alternatively, you can update the web.xml file manually.
Modify $ALF_INSTALL_DIR/tomcat/webapps/alfresco/WEB-INF/web.xml and uncomment the following section and update
cors.allowOrigin to http://localhost:3000:
<filter>
<filter-name>CORS</filter-name>
<filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
<init-param>
<param-name>cors.allowGenericHttpRequests</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>cors.allowOrigin</param-name>
<param-value>http://localhost:3000</param-value>
</init-param>
<init-param>
<param-name>cors.allowSubdomains</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>cors.supportedMethods</param-name>
<param-value>GET, HEAD, POST, PUT, DELETE, OPTIONS</param-value>
</init-param>
<init-param>
<param-name>cors.supportedHeaders</param-name>
<param-value>origin, authorization, x-file-size, x-file-name, content-type, accept, x-file-type</param-value>
</init-param>
<init-param>
<param-name>cors.supportsCredentials</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>cors.maxAge</param-name>
<param-value>3600</param-value>
</init-param>
</filter>When specifying the cors.allowOrigin URL, make sure that you use the URL that will be used by the web client.
Then uncomment the filter mappings:
<filter-mapping>
<filter-name>CORS</filter-name>
<url-pattern>/api/*</url-pattern>
<url-pattern>/service/*</url-pattern>
<url-pattern>/s/*</url-pattern>
<url-pattern>/cmisbrowser/*</url-pattern>
</filter-mapping>