Stream Manager CORS Solution

Problem

When Stream Manager is deployed online and is running on a remote server, the HTTP REST api is inaccessible to javascript running on a different system (for example, localhost). Attempting to access the REST api from localhost results in a CORS (HTTP access control) error in the browser console.

Cross origin access may be required to use the Red5 Pro testbed from localhost, for testing or developing while using the remote Stream Manager instance as a data source.

WebConsole error:

Cross-Origin Request Blocked: the Same Origin Policy disallows reading the remote ersource at http://192.168.0.1:5080/streammanager/api/2.0/event/list. (Reason: CORS header 'Access-Control-Origin' missing).

Solution

To solve the problem of Cross Domain access to data, the server must allow requests from the given source or from all sources.

Red5 Pro is based on Tomcat server. So one option is to add the Tomcat compatible CORS filter which modifies the header of the response by adding Access-Control-*.

Basic

The most basic way of registering the tomcat filter is:

  • Edit {red5pro}/webapps/streammanager/WEB-INF/web.xml, adding the following filter definition to the file. [This configuration allows all origins to load data from streammanager].
<filter>
  <filter-name>CorsFilter</filter-name>
  <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
  <init-param>
       <param-name>cors.allowed.methods</param-name>
       <param-value>GET, POST, PUT, DELETE</param-value>
  </init-param>
</filter>
<filter-mapping>
  <filter-name>CorsFilter</filter-name>
  <url-pattern>/api/*</url-pattern>
</filter-mapping>
  • Save and close the web.xml file
  • Restart the Stream Manager server instance.

You should now be able to access the REST api from a different Red5 Pro instance even if it is running on localhost.

A better and finer Tomcat CORS filter configuration allows you to restrict Cross Origin Access to a specific IP address. The following configuration goes into the {red5pro}/webapps/streammanager/WEB-INF/web.xml file just as shown above.

<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>http://localhost:5080, http://192.168.1.46:5080</param-value>
      </init-param>
      <init-param>
         <param-name>cors.exposed.headers</param-name>
         <param-value>Access-Control-Allow-Origin</param-value>
      </init-param>
      <init-param>
       <param-name>cors.allowed.methods</param-name>
       <param-value>GET, POST, PUT, DELETE</param-value>
      </init-param>
  </filter>
  <filter-mapping>
      <filter-name>CorsFilter</filter-name>
      <url-pattern>/api/*</url-pattern>
  </filter-mapping>

The above configuration allows access from localhost and 192.168.1.46 using the cors.allowed.origins param. It is important to know that the port must be specified to which the request is being made. Since the default http port for Red5 Pro is 5080, that is what we specify in the above sample.

Additionally the cors.allowed.methods param is essential in configuring access to the REST api methods on Stream Manager.If this param is excluded or some of the values for the param shown above are omitted, all the api calls may not function as expected.

There are many other ways to configure the filter. You can look up those options in the official documentation.

SPECIAL NOTES:

There is a known issue with the Tomcat CORS filter and the Red5 Pro implementation of HLS. The above technique is specific to Stream Manager, since a Stream Manager instance is not used for streaming.