15 Replies Latest reply on Apr 11, 2017 4:45 PM by gregor

    PI Web API: Access Issue

    Doddabasappa

      Hi,

       

      Developed web application where making ajax call to PI Web API as below. PI Web API configuration is set to basic authentication, hence I am passing credentials as required. 

       

      function MakeAjaxRequest(type, url, SuccessCallBack, data) {
          $.ajax({
              type: type,
              url: url,
              cache: false,
              async: true,
              data: data,
              contentType: "application/json",
              beforeSend: function (xhr) {
                  xhr.setRequestHeader('Authorization', make_base_auth(username, password));
              },
              success: SuccessCallBack,
              error: (function (error, variable) {
                  alert('There was an error with the request');
              })
          });
      }
      

       

      The issue is, when I run application for the first time, will be encountering access denied issue as show below. But if I run application after connecting to base PI web API (https://server/piwebapi/) by providing credentials in browser, it will works fine.

       

      IE Web API.png

       

      What could be the issue?

        • Re: PI Web API: Access Issue
          gregor

          Hello Doddabasappa,

           

          Is your application sending a GET or what kind of method is it using?

          You've highlighted a part of the console log indicating the access denied is related to CORS (Cross Origin Resource Sharing). Can you please verify your settings against those recommended in the PI Web API documentation?

           

          You can test GET requests against our public PI Web API endpoint as follows:

           

                  function getPIWebAPIData() {
                      var xhttp = new XMLHttpRequest();
                      xhttp.onreadystatechange = function () {
                          if (xhttp.readyState === 4) {
                              if (xhttp.status === 200) {
                                  console.log(xhttp.responseText);
                              } else {
                                  console.log("Failed: " + xhttp.status);
                              }
                          }
                      }
                      var sURI = "https://devdata.osisoft.com/piwebapi";
                      var sUser = "webapiuser";
                      var sPW = "!try3.14webapi!";
                      var Base64EncodeAuth = btoa(sUser + ":" + sPW);
                      xhttp.open("GET", sURI, true);
                      xhttp.setRequestHeader('Content-Type', 'application/json');
                      xhttp.setRequestHeader('Authorization', "Basic " + Base64EncodeAuth);
                      xhttp.send();
                  }
          
          • Re: PI Web API: Access Issue
            Doddabasappa

            Hi George,

             

            In my application I am using both GET and POST requests. On page load, it's GET.

            I checked about CORS. Actually in my case domain is same, in fact I am developing application on same machine where PI Web API installed.

             

            Tested your code and response received is as below from IE. But it works fine with chrome, no CORS message.

             

             

            Thanks,

              • Re: PI Web API: Access Issue
                gregor

                Hello Doddabasappa,

                 

                It is well known that Internet Explorer lacks supporting some of the modern web page features but I don't see any error message in the latest screenshot you posted. The CORS related Messages are informational. Hence my understanding is that it is working for you now, is it?

                  • Re: PI Web API: Access Issue
                    Doddabasappa

                    Hi George,

                     

                    Actually my issue is related to access to PI WEB API when I run application in IE. As mentioned earlier, it works fine only if I keep tab connected to PI Web API in browser and run application, otherwise it will end up in error.

                     

                    function make_base_auth(user, password) {
                        var tok = user + ':' + password;
                        var hash = btoa(tok);
                        return "Basic " + hash;
                    }
                    
                    function MakeAjaxRequest(type, url, SuccessCallBack, data) {
                        $.ajax({
                            type: type,
                            url: url,
                            cache: false,
                            async: true,
                            data: data,
                            contentType: "application/json",
                            beforeSend: function (xhr) {
                                xhr.setRequestHeader('Authorization', make_base_auth(username, password));
                            },
                            success: SuccessCallBack,
                            error: (function (error, variable) {
                                alert('There was an error with the request');
                            })
                        });
                    }
                    
                    
                    
                    
                    
                    
                    
                    
                    
                      • Re: PI Web API: Access Issue
                        gregor

                        Hello Doddabasappa,

                         

                        http://caniuse.com/ is pretty useful finding out what's supported by a certain browser and what not. For the XMLHttpRequest, I understand there's only partial support in IE 11. Please pay attention to the Notes and Known Issues.

                        1 of 1 people found this helpful
                        • Re: PI Web API: Access Issue
                          gregor

                          Hello Doddabasappa,

                           

                          After I had posted my reply yesterday, I searched the forums and found Alex Duhig's post Learn the Basics of PI Programming - Developing a Web Application With jQuery and PI Web API

                          Is this what you like to use?

                           

                          If so, please disregard my reply from yesterday as it is not sufficient. Using these Web technologies is confusing me but as far as I know what Alex is using in his sample is JQuery even it is using the keyword "Ajax".

                          When you check http://caniuse.com/ for JQuery, you will see that this technology is not supported in IE 11 and the same is valid for earlier IE versions as you can see by clicking [Show all].

                          1 of 1 people found this helpful
                          • Re: PI Web API: Access Issue
                            aduhig

                            Hi Doddabasappa,

                            I see you commented on the WebAPI article I wrote, we may as well continue discussion here rather than on that article.

                            I see you're using Basic Auth for this, is it hard-coded in your application? You may have more luck using the withCredentials flag for AJAX, as in the article:

                             

                            xhrFields: {

                                        withCredentials: true

                                    },

                             

                            Let us know if this works better for you.

                            -Alex

                            • Re: PI Web API: Access Issue
                              Marcos Vainer Loeff

                              Can you check if the code below works better?

                               

                              function GetJsonContent(url, SuccessCallBack, ErrorCallBack) {
                               
                                    $.ajax({
                               
                                        type: 'GET',
                               
                                        url: url,
                               
                                        cache: false,
                               
                                        async: true,
                               
                              username: 'username',
                               
                              password: 'password',
                               
                              crossDomain : true,
                               
                              xhrFields: {
                               
                              withCredentials: true
                               
                              },
                               
                                        success: SuccessCallBack,
                               
                                        error: ErrorCallBack
                               
                                    });
                               
                                }
                               
                              
                                • Re: PI Web API: Access Issue
                                  Doddabasappa

                                  Hi Alex, Macros

                                   

                                  I modified code as per your suggestion, but still facing same issue with IE. I am wondering how its working in Chrome.

                                   

                                  Thanks,

                                    • Re: PI Web API: Access Issue
                                      Marcos Vainer Loeff

                                      Hello, Could you the following please? Go to security area (Internet Options> Security) make ENABLE The Following setting: Miscellaneous> Access data sources across domains.

                                      • Re: PI Web API: Access Issue
                                        gregor

                                        Hello Doddabasappa,

                                         

                                        I did some additional research and have to beg your pardon. I don't know why CanIuse identifies jQuery to be not supported in IE. According to jQuery's browser support page, IE 9 and greater are supported. I've just learned about CanIuse recently and it appears this resource is not 100% reliable or I am using it wrongly.

                                         

                                        When trying Marcos' sample (above), Chrome was prompting me for credentials, I researched further and found this discussion at Stackoverflow and I finally managed to make things work in IE and Chrome.

                                         

                                                    var sUser = "webapiuser";
                                                    var sPW = "!try3.14webapi!";
                                                    var Base64EncodeAuth = btoa(sUser + ":" + sPW);
                                                    $.ajax({
                                                    type: "GET",
                                                    url: "https://devdata.osisoft.com/piwebapi",
                                                    dataType: 'json',
                                                    async: true,
                                                    headers: {
                                                        "Authorization": "Basic " + Base64EncodeAuth
                                                    },
                                                    data: '{ "comment" }',
                                                    success: SuccessCallBack,
                                                    error: (function (error, variable) {
                                                        alert('There was an error with the request');
                                                    })
                                                    });
                                        

                                         

                                        Edit: Line 12 is not needed but may be the right way to submit a post. Hence I am leaving it in there.

                                        1 of 1 people found this helpful