locked
How to use API GET request on HTML page with javascript / ajax to retrieve data? RRS feed

  • Question

  • User-851246726 posted

    I am following this documentation: https://docs.oracle.com/cloud/latest/marketingcs_gs/OMCAC/DeterminingBaseURL.html

    Using basic authentication.

    I have already determined the base URL, so I am using the base URL directly in the code.

    I am not 100% if i need authorization code or not (not sure, how i will get it) so i am not using this in my code: https://docs.oracle.com/cloud/latest/marketingcs_gs/OMCAC/Authentication_Basic.html

    I am trying to get a list of emails by a simple GET request like here: https://docs.oracle.com/cloud/latest/marketingcs_gs/OMCAC/api-application-2.0-emails.html

    So far, I have created this code but I do not see any success? why? is there any issue with my code? can anyone help please?

    <!DOCTYPE html>
    <html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script>
            $(document).ready(function () {
                var username = "MYUSERNAME";
                var password = "MYPASSWORD";
    
                function make_base_auth(user, password) {
                    var tok = user + ':' + password;
                    var hash = btoa(tok);
                    return "Basic " + hash;
                }
    
                var url1 = 'https://BASEURL.com/api/REST/2.0/assets/emails';
    
                $.ajax
                    ({
                        type: "GET",
                        url: url1,
                        dataType: 'jsonp',
                        cache: false,
                        //contentType: 'application/x-www-form-urlencoded',
                        headers: {                        
                            'Accept': 'text/html',
                            'Content-Type': 'application/json',
                            'Content-Type': 'application/x-www-form-urlencoded',
                            'Access-Control-Allow-Origin': '* ',
                            'Access-Control - Allow - Headers': 'Origin, X-Requested - With, Content-Type, Accept'
                        },
                        //async: false,
                        //data: '{}',
                        beforeSend: function (xhr) {
                            xhr.setRequestHeader('Authorization', make_base_auth(username, password));
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            alert(textStatus, errorThrown);
                            console.log(errorThrown);
                        },
                        success: function (result) {
                            console.log(result);
                            alert('success - this is working');
                        }
                        //success: function (jsondata) {
                        //    console.log(status);
                        //}
                    });
    
            });
    
        </script>
    </head>
    <body>
    
    
    
    
    
    </body>
    </html>

    I am getting CORP error in the log. Based on the documentation that I have provided, do I need to pass 'Authorization' in the header? If yes, how can i get the authorization code?

    How to report the CORP error?

    The alert box only says "error".

    Sunday, June 2, 2019 4:13 AM

All replies

  • User-474980206 posted
    You should add a fail handler to get the error. Or just look at the browsers network tab and console. You are probably getting an error, bad data, bad url, one security (CORS)
    Sunday, June 2, 2019 5:02 AM
  • User-851246726 posted
    Could you please help me how to do that? I'm new to this. How to add error handler that gives details and how to add success massage that gives the complete result of successful GET request?

    Also- is CORS going to be an issue? I thought we can do Ajax request on a html page with JavaScript, no?
    Sunday, June 2, 2019 10:27 AM
  • User-851246726 posted

    I did some update in the code, updated my original post with more details. Can anyone help please?

    Sunday, June 2, 2019 11:12 AM
  • User-2054057000 posted

    Clearly there is an authentication failure. Try sending your username and passwords in the Header of your .ajax() method request:

    headers: {
     Key: "xxx",
     Secret: "yyy"
    }

    I recommend you to read tutorial on Consuming  Web API in jQuery which will help.

    Monday, June 3, 2019 3:48 AM
  • User-474980206 posted

    you are hitting a new chrome security feature:

       https://www.chromium.org/Home/chromium-security/corb-for-developers

    the real issue is that you are trying to use JSONP and the api probably does not support JSONP. You will need to use CORS instead. if the api does send the proper CORS headers, you will need to proxy the api calls via your server code. that is you add web service actions to your server that call the api.

    Monday, June 3, 2019 3:54 PM