cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Community Tip - You can subscribe to a forum, label or individual post and receive email notifications when someone posts a new topic or reply. Learn more! X

CORS support

aswathp
1-Newbie

CORS support

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.



10 REPLIES 10
adam11
5-Regular Member
(To:aswathp)

Hi Aswath,

Which version of ThingWorx are you using?

aswathp
1-Newbie
(To:adam11)

Hi Adam.


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



mattw1
1-Newbie
(To:aswathp)

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>

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

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

 <init-param>

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

   &lt;param-value&gt;&lt;/param-<wbr>value&gt;</span></p><p dir="ltr" style="color: rgb(34, 34, 34); font-family: arial, sans-serif; font-size: 12.8000001907349px; line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-size: 16px; font-family: Arial; color: rgb(0, 128, 0); vertical-align: baseline; white-space: pre-wrap;">  &lt;/init-param&gt;</span></p><p dir="ltr" style="color: rgb(34, 34, 34); font-family: arial, sans-serif; font-size: 12.8000001907349px; line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-size: 16px; font-family: Arial; color: rgb(0, 128, 0); vertical-align: baseline; white-space: pre-wrap;">  &lt;init-param&gt;</span></p><p dir="ltr" style="color: rgb(34, 34, 34); font-family: arial, sans-serif; font-size: 12.8000001907349px; line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-size: 16px; font-family: Arial; color: rgb(0, 128, 0); vertical-align: baseline; white-space: pre-wrap;">    &lt;param-name&gt;<span class="il">cors</span>.exposed.<wbr>headers&lt;/param-name&gt;</span></p><p dir="ltr" style="color: rgb(34, 34, 34); font-family: arial, sans-serif; font-size: 12.8000001907349px; line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-size: 16px; font-family: Arial; color: rgb(0, 128, 0); vertical-align: baseline; white-space: pre-wrap;">    &lt;param-value&gt;Access-<wbr>Control-Allow-Origin,Access-<wbr>Control-Allow-Credentials&lt;/<wbr>param-value&gt;</span></p><p dir="ltr" style="color: rgb(34, 34, 34); font-family: arial, sans-serif; font-size: 12.8000001907349px; line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-size: 16px; font-family: Arial; color: rgb(0, 128, 0); vertical-align: baseline; white-space: pre-wrap;">  &lt;/init-param&gt;</span></p><br><p dir="ltr" style="color: rgb(34, 34, 34); font-family: arial, sans-serif; font-size: 12.8000001907349px; line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-size: 16px; font-family: Arial; color: rgb(0, 128, 0); vertical-align: baseline; white-space: pre-wrap;">&lt;/filter&gt;</span></p><p dir="ltr" style="color: rgb(34, 34, 34); font-family: arial, sans-serif; font-size: 12.8000001907349px; line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-size: 16px; font-family: Arial; color: rgb(0, 128, 0); vertical-align: baseline; white-space: pre-wrap;">&lt;filter-mapping&gt;</span></p><p dir="ltr" style="color: rgb(34, 34, 34); font-family: arial, sans-serif; font-size: 12.8000001907349px; line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-size: 16px; font-family: Arial; color: rgb(0, 128, 0); vertical-align: baseline; white-space: pre-wrap;">  &lt;filter-name&gt;CorsFilter&lt;/<wbr>filter-name&gt;</span></p><p dir="ltr" style="color: rgb(34, 34, 34); font-family: arial, sans-serif; font-size: 12.8000001907349px; line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-size: 16px; font-family: Arial; color: rgb(0, 128, 0); vertical-align: baseline; white-space: pre-wrap;"><b>  <u>&lt;url-pattern&gt;/&lt;/url-pattern&gt;

</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
1-Newbie
(To:aswathp)

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>

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

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

<init-param>

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

   &lt;param-value&gt;&lt;/param-value&gt;<u></u><u></u></span></p><p class="MsoNormal" style="margin: 0px; color: rgb(34, 34, 34); font-family: arial, sans-serif; font-size: 12.8000001907349px; line-height: normal; background-color: rgb(255, 255, 255);"><span style="font-size: 11pt; font-family: Calibri, sans-serif; color: rgb(31, 73, 125);">&lt;/init-param&gt;<u></u><u></u></span></p><p class="MsoNormal" style="margin: 0px; color: rgb(34, 34, 34); font-family: arial, sans-serif; font-size: 12.8000001907349px; line-height: normal; background-color: rgb(255, 255, 255);"><span style="font-size: 11pt; font-family: Calibri, sans-serif; color: rgb(31, 73, 125);">&lt;init-param&gt;<u></u><u></u></span></p><p class="MsoNormal" style="margin: 0px; color: rgb(34, 34, 34); font-family: arial, sans-serif; font-size: 12.8000001907349px; line-height: normal; background-color: rgb(255, 255, 255);"><span style="font-size: 11pt; font-family: Calibri, sans-serif; color: rgb(31, 73, 125);">   &lt;param-name&gt;cors.exposed.<wbr>headers&lt;/param-name&gt;<u></u><u></u></span></p><p class="MsoNormal" style="margin: 0px; color: rgb(34, 34, 34); font-family: arial, sans-serif; font-size: 12.8000001907349px; line-height: normal; background-color: rgb(255, 255, 255);"><span style="font-size: 11pt; font-family: Calibri, sans-serif; color: rgb(31, 73, 125);">   &lt;param-value&gt;Access-Control-<wbr>Allow-Origin,Access-Control-<wbr>Allow-Credentials&lt;/param-<wbr>value&gt;<u></u><u></u></span></p><p class="MsoNormal" style="margin: 0px; color: rgb(34, 34, 34); font-family: arial, sans-serif; font-size: 12.8000001907349px; line-height: normal; background-color: rgb(255, 255, 255);"><span style="font-size: 11pt; font-family: Calibri, sans-serif; color: rgb(31, 73, 125);">&lt;/init-param&gt;<u></u><u></u></span></p><p class="MsoNormal" style="margin: 0px; color: rgb(34, 34, 34); font-family: arial, sans-serif; font-size: 12.8000001907349px; line-height: normal; background-color: rgb(255, 255, 255);"><span style="font-size: 11pt; font-family: Calibri, sans-serif; color: rgb(31, 73, 125);">&lt;/filter&gt;<u></u><u></u></span></p><p class="MsoNormal" style="margin: 0px; color: rgb(34, 34, 34); font-family: arial, sans-serif; font-size: 12.8000001907349px; line-height: normal; background-color: rgb(255, 255, 255);"><span style="font-size: 11pt; font-family: Calibri, sans-serif; color: rgb(31, 73, 125);">&lt;filter-mapping&gt;<u></u><u></u></span></p><p class="MsoNormal" style="margin: 0px; color: rgb(34, 34, 34); font-family: arial, sans-serif; font-size: 12.8000001907349px; line-height: normal; background-color: rgb(255, 255, 255);"><span style="font-size: 11pt; font-family: Calibri, sans-serif; color: rgb(31, 73, 125);">  &lt;filter-name&gt;CorsFilter&lt;/<wbr>filter-name&gt;<u></u><u></u></span></p><p class="MsoNormal" style="margin: 0px; color: rgb(34, 34, 34); font-family: arial, sans-serif; font-size: 12.8000001907349px; line-height: normal; background-color: rgb(255, 255, 255);"><span style="font-size: 11pt; font-family: Calibri, sans-serif; color: rgb(31, 73, 125);">  &lt;url-pattern&gt;/Things/&lt;/url-pattern>

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

  &lt;url-pattern&gt;/ThingTemplates/<wbr>&lt;/url-pattern&gt;<u></u><u></u></span></p><p class="MsoNormal" style="margin: 0px; color: rgb(34, 34, 34); font-family: arial, sans-serif; font-size: 12.8000001907349px; line-height: normal; background-color: rgb(255, 255, 255);"><span style="font-size: 11pt; font-family: Calibri, sans-serif; color: rgb(31, 73, 125);">  &lt;filter-name&gt;CorsFilter&lt;/<wbr>filter-name&gt;<u></u><u></u></span></p><p class="MsoNormal" style="margin: 0px; color: rgb(34, 34, 34); font-family: arial, sans-serif; font-size: 12.8000001907349px; line-height: normal; background-color: rgb(255, 255, 255);"><span style="font-size: 11pt; font-family: Calibri, sans-serif; color: rgb(31, 73, 125);">  &lt;url-pattern&gt;/Networks/&lt;/url-pattern>

</filter-mapping>

 

CORS requests now work properly without breaking the composer.


-Matt



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

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

Best Regards,

Jacek

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

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

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
1-Newbie
1-Newbie
(To:aswathp)

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


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

rwang1
1-Newbie
(To:aswathp)

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>

  <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

Top Tags