Forum Discussion

ChrisDyroff's avatar
ChrisDyroff
Qrew Member
4 years ago

New RESTful API in Code Pages?

Hi, QB Folks!

Anyone know if you can use the new API inside your Code Pages? I'm getting a CORS error when I try.

I need to combine a few existing QB reports into a single table for reporting, and thought the new API's "reports" endpoint would work well. I'm hoping to use JS to fetch the data and generate a table.

But when I try to pull the data into the page directly, using the JQuery code samples from the API Portal, I get a CORS error. 
<head>
    <script>
    var headers = {
        'QB-Realm-Hostname': 'xxxxx',
        'User-Agent': 'API-Explorer',
        'Authorization': 'QB-USER-TOKEN xxxxxxxxxxxxxxxxxxxxxxxx',
        'Content-Type': 'application/json'
    };

    $.ajax({
        url: 'https://api.quickbase.com/v1/reports/10/run?tableId=xxxxxxxxx&skip={skip}&top=10',
        method: 'POST',
        headers: headers,
        success: function(result) {
            console.log(JSON.stringify(result));
        }
    })​
    </script>
</head>
<body>
    <h2>Table will go here.</h2>
    <table></table>
</body>


When the page loads, in the console:

Access to XMLHttpRequest at 'https://api.quickbase.com/v1/reports/10/run?tableId=xxxxxxxxx&skip={skip}&top=10' from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.


I'm hoping there is a workaround that I'm just missing. Any help is appreciated.

Thanks,
CD



------------------------------
Chris Dyroff
------------------------------
APIs and custom code
App home pages
  • RickPutnam's avatar
    RickPutnam
    Qrew Cadet
    4 years ago
    I don't know that accessing the API from a code page is possible. But I wonder whether you have tried adding an Access-Control-Allow-Origin header to the request as that is called out in the console message.

    No 'Access-Control-Allow-Origin' header is present on the requested resource.​


    ------------------------------
    Rick Putnam
    ------------------------------
  • AngelRodriguez's avatar
    AngelRodriguez
    Qrew Assistant Captain
    4 years ago
    It is possible to access the API from a code page. I'm actually using it now to map results from user inputs of zip codes using Google's Distance Matrix API and the 'Query for data' QB API. 

    Another thing is that you're using jQuery with this call which uses the older 'XMLHttpRequest' API. It's likely that this is causing CORS error you're seeing. You can try using ES6 which uses the Fetch API. The Fetch API allows you to make no-cors requests. I noticed that you placed your script tags inside of your html <head> tags. You don't want to do that when you're writing JavaScript. Because JavaScript is asynchronous, in this case your jQuery, by placing it inside of your <head> tags, JavaScript will run before the html inside of the <body> tag and will throw errors. Try placing your <script> tags after your h2 and table tags inside of the <body> tag.

    Here's a sample of the same request using the Fetch API:
    <body>
    <h2>Table will go here.</h2>
    <table></table>

    <script>
        var headers = {
            'QB-Realm-Hostname': 'xxxxx',
            'User-Agent': 'API-Explorer',
            'Authorization': 'QB-USER-TOKEN xxxxxxxxxxxxxxxxxxxxxxxx',
            'Content-Type': 'application/json'
        }


        fetch('https://api.quickbase.com/v1/reports/10/run?tableId=xxxxxxxxx&skip={skip}&top=10', {
                method: 'POST',
                headers: headers,
            })
            .then(res => {
                if (res.ok) {
                    return res.json().then(res => console.log(res));
                }
                return res.json().then(resBody => Promise.reject({
                    status: res.status,
                    ...resBody
                }));
            })
            .catch(err => console.log(err))
    </script>

</body>​

    If that doesn't work, try what Rick mentioned. You might have to add the 'Access-Control-Allow-Origin' inside of  your headers object, but remember to add your <script> tags inside of the <body> after your html.



    ------------------------------
    AR
    ------------------------------
  • NathanHawe's avatar
    NathanHawe
    Qrew Cadet
    4 years ago
    This isn't related to the question you asked but if you're hard coding your user tokens into the code pages you might want to consider using this endpoint to get temporary user tokens instead: https://developer.quickbase.com/operation/getTempTokenDBID.  Any users with access to the app that your code page is part of can read the source and retrieve the token you used.  Maybe that's not an issue in this use case if the token has the same or less access than all of the users of that application, but if it has more (or it's an access token created by a Quick Base admin user because those always grant access to application level and audit APIs) then those tokens can be used by someone to elevate their privilege.  Even in the scenario where the token has the same or less access than users, if it has create/modify access then users could use the token to obfuscate their own actions within the application.

    ------------------------------
    Nathan Hawe
    ------------------------------