CORS support

aswathp · ‎Apr 25, 2015

Hi,

I get "No 'Access-Control-Allow-Origin' header is present on the requested resource." error when I try to access the REST url from javascript. How do I enable Cross-site HTTP requests in my local Thingworx instance.

Thanks in advance.

adam11 · ‎Apr 28, 2015

Hi Aswath,

Which version of ThingWorx are you using?

aswathp · ‎Apr 28, 2015

Hi Adam.

I am using Thingworx 5.4, but will be upgrading soon to version 6.

mattw1 · ‎Apr 29, 2015

Hi Aswath/Andy,

I am having the same issue. JamesM at Thingworx has indicated he created a support ticket to address this issue, and it is very important that we get a resolution so that we can make web applications that access the REST API via javascript without requiring heavy server-side code.

I am also on 5.4 and plan on migrating to 6.0 eventually.

I can get the REST calls to work, but my "fix" ends up breaking the Thingworx Composer:

When I add the following settings in the \Tomcat 7.0\conf\web.xml file:

<filter-name>CorsFilter</filter-name>

<filter-class>org.apache.catalina.filters.CorsFilter</filter-class>

<init-param>

<param-name>.allowed.origins</param-name>

<param-value></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> </filter><filter-mapping> <filter-name>CorsFilter</filter-name> <url-pattern>/</url-pattern>

</filter-mapping>

I am able to make my API calls without an issue, but the composer stops working.

If I change the

<url-pattern>/*</url-pattern>

to <url-pattern>/</url-pattern>
, the composer starts working again, but my API calls go back to giving me "No 'Access-Control-Allow-Origin' error.

Hopefully this info helps with the troubleshooting. Please let me know if you find a resolution.

Thanks!

-Matt

mattw1 · ‎May 05, 2015

Follow Up

After working through this with ThingWorx support, we were able to come up with the following settings for the web.xml file:

<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></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></filter><filter-mapping> <filter-name>CorsFilter</filter-name> <url-pattern>/Things/</url-pattern>

<filter-name>CorsFilter</filter-name>

<url-pattern>/ThingTemplates/</url-pattern> <filter-name>CorsFilter</filter-name> <url-pattern>/Networks/</url-pattern>

</filter-mapping>

CORS requests now work properly without breaking the composer.

-Matt

ngarner-2 · ‎Dec 13, 2015

Hi Matt,

I'm hitting this issue now and was happy to see you solved it. Can you post the fix again without the formatting issues? This is the only thread that addresses this problem.

Thank you,

Nick

jacekgra · ‎Feb 22, 2016

Nick, did you manage to obtain well formated version of the filter?

Best Regards,

Jacek

ngarner · ‎Feb 22, 2016

No, I manually cleaned up the output from above then did some Googling and worked it out.

<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>*</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>

jacekgra · ‎Feb 23, 2016

Thank you Nick for quick resposne.

I've added this filter code at the bottom of web.xml in conf of Tomcat, but the problem still occurs:

HttpRequest cannot load http://192.168.215.163:8080/Thingworx/Things/TwxCartThing/Services/getProducts?Accept=application/json&appKey=30c4d679-8ba9-4f9a-84aa-babb1c6d6af7. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://192.168.215.163:8100' is therefore not allowed access. The response had HTTP status code 403.

I am calling this resource from external javascript application running on port 8100 with following call:

this.getProducts = function(settings, callback) {
    $http.defaults.useXDomain = true;
      $http.post(settings.twxUrl + "Things/TwxCartThing/Services/getProducts?Accept=application/json&appKey=" + settings.appKey).success(function(data) {
        callback(data);
      });
};

Did you have to call the resource in some other way, add some request header etc?

Thanks in advance for any hints.

Best Regards,

Jacek

qn · ‎Feb 25, 2016

How to Enable Cross-Origin Resource Sharing (CORS) in Apache Tomcat

https://support.ptc.com/appserver/cs/view/solution.jsp?n=CS229450

rwang1 · ‎May 19, 2016

Hi everyone,

After I added following settings to my web.xml file , I can solve "Access-Control-Allow-Origin" error ,But I met another problem is that I can't delete Entity(ex:Thing) from my Thingworx. Does anyone have the same problem ? Could give me some suggestion about that? Thank you.

<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>*</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>

Many thanks