10 Replies Latest reply on May 19, 2016 5:03 AM by rwang RSS
    aswathp 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.



      • CORS support
        adam Creator

        Hi Aswath,

         

        Which version of ThingWorx are you using?

        • CORS support
          mattw Newbie

          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



          • CORS support
            mattw Newbie

            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



              • Re: CORS support
                ngarner-2 Explorer

                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

                  • Re: CORS support
                    jacekgra Apprentice

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

                     

                    Best Regards,

                    Jacek

                      • Re: CORS support
                        ngarner Explorer

                        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>

                          • Re: CORS support
                            jacekgra Apprentice

                            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

                    • Re: CORS support
                      qn Communicator

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


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

                      • Re: CORS support
                        rwang Newbie

                        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