9 Replies Latest reply on Apr 18, 2016 12:27 PM by dng

    PI Web API CORS request failed

    hzhao

      Hi,

       

      I'm trying the sample code of browsing AF elements here.

       

      I ran the code on my own laptop while my Web API server (hzhao-piprimary) is on osisoft SCVMM, the same domain as my laptop.

       

      My Web API settings are as follows:

      but I kept getting the following error:

       

      XMLHttpRequest cannot load https://hzhao-piprimary/piwebapi/assetservers. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:60318' is therefore not allowed access.

       

      I've tried to use both Basic and Kerberos Authentication, but both of them will give me the above error.

       

      Attached is my code, feel free to contact me hzhao@osisoft.com if you need more information

       

      Thank you very much!

        • Re: PI Web API CORS request failed
          Lonnie Bowling

          Hi Chandler,

           

          Take a look at this blog post:

          PI Web API 2015 R2 - New features demo - JavaScript

           

          I don't think you request is setup to allow for CORS. Look at this code and notice the crossDomain is set to true. Give that a shot.

           

          1.     //Returns the ajax function that will be responsbile for communicating with PI Web API. The request starts after the method $.when method is called. 
          2.     function processJsonContent(type, data, url, successCallBack, errorCallBack) { 
          3.         return $.ajax({ 
          4.             type: type, 
          5.             headers: { 
          6.                 "Content-Type": "application/json; charset=utf-8"
          7.             }, 
          8.             url: url, 
          9.             cache: false
          10.             data: data, 
          11.             async: true
          12.             username: username, 
          13.             password: password, 
          14.              
          15.             crossDomain: true
          16.             xhrFields: { 
          17.                 withCredentials: true 
          18.             }, 
          19.             success: successCallBack, 
          20.             error: errorCallBack 
          21.         }); 
          22.         //It seems that contentType option doesn't work pretty well. Using the headers option seems to work better. 
          23.         //crossDomain and xhrFields with  withCredentials: true needed to be used because the Anonymous authentication is disabled 
          24.         //and that my web application and PI Web API are running in different domains. 
          25.     }

           

          Lonnie

            • Re: PI Web API CORS request failed
              hzhao

              Hi Lonnie,

               

              Thanks a lot for your reply!

               

              However, after trying the configuration, I still get error 400.

              The following is my code:

              function loadChildren(n) {
                  n.loaded = true;
                  childrenMap[n.type].forEach(function (childCollection) {
                      $.ajax({
                          url: n.links[childCollection],
                          success: function (collection) {
                              n[childCollection] = collection.Items.map(function (item) {
                                  return new node(item.Name, childCollection, item.Links, n.div);
                              })
                          },
                          error: function (xhr) {
              
              
                              console.log(xhr.responseText);
                          },
                          /*
                          beforeSend: function (xhr) {
                              xhr.setRequestHeader('Authorization', makeBasicAuth('hzhao', '20140609Zha%'));
                          },
                          */
                          /*
                          beforeSend: function (xhr) {
                              xhr.setRequestHeader('Authorization', 'Basic ' + btoa('hzhao:20140609Zha%'));
                          },
                          */
                          crossDomain: false,
                          /*
                          headers: {
                              "Content-Type": "application/json; charset=utf-8"
                          },
                          */
                          /*
                          username: 'hzhao',
                          password: '20140609Zha%',
                          */
                          xhrFields: {
                              withCredentials: true
                          }
                          
                      })
                  });
              }
              

              My Authentication method is Basic ONLY, and I have tried to specify/not specify username and password, but neither of them works.

               

              Thank you and look forward to your reply!

                • Re: PI Web API CORS request failed
                  Eugene Lee

                  Hi Chandler,

                   

                  Try changing Basic to Kerberos because in the code, you commented out the parts that were needed for Basic Auth.

                    • Re: PI Web API CORS request failed
                      hzhao

                      As Eugene Lee pointed out, it might not be the code's issue. The following code with Kerberos Authentication method works.

                      function loadChildren(n) {
                          n.loaded = true;
                          childrenMap[n.type].forEach(function (childCollection) {
                              $.ajax({
                                  url: n.links[childCollection],
                                  success: function (collection) {
                                      n[childCollection] = collection.Items.map(function (item) {
                                          return new node(item.Name, childCollection, item.Links, n.div);
                                      })
                                  },
                                  error: function (xhr) {
                      
                      
                                      console.log(xhr.responseText);
                                  },
                                  xhrFields: {
                                      withCredentials: true
                                  }
                                  
                              })
                          });
                      }
                      

                      The tricky thing is it only works when site is not certified.

                      if I use FQDN or hostname which is certified by a self-signed certificate, I will get the following error:

                      10.32.208.60 is the IP of hzhao-piprimary.

                       

                      Anyone has encountered this before?

                • Re: PI Web API CORS request failed
                  gonmerciel

                  You can't use both support credentials and use * as CorsOrigins:  PI Web API

                  You will have to specify the host http://localhost:60318 in CorsOrigins.