Smartsheet api used in confluence page

[yapi_hew]

How to integrate smartsheet use in confluence, when I used inside html macro it will through me this error can anybody please how can I solve this error. 

Error : Access to XMLHttpRequest at 'https://amazonaws.com/csvtojson.json' from origin 'https://ac-html-sandbox.herokuapp.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

[Minh Tran · Accepted solution]

@yapi_hew Can you show me the code snippet you integrate that?

[yapi_hew]

<script>

var table = new DataTable(".table", {
    ajax: {
          url: "https://api.smartsheet.com/2.0/sheets/6051615279998852",
          content: {
                   type: "json"
           }
     },
       searchable: true,
       fixedHeight: false
});

table.on("datatable.ajax.loaded", function() {
        this.wrapper.className = this.wrapper.className.replace(" dataTable-loading", "");
        var columns = table.columns();
        console.log(columns)
        columns.hide([2, 4, 7, 9, 10, 11, 13, 14, 15, 16, 18, 19]);
});

table.on('datatable.search', function(query, matched) {
        console.log(query, matched);
});

</script>

[yapi_hew]

<script>

var table = new DataTable(".table", {
ajax: {
url: "https://api.smartsheet.com/2.0/sheets/6051615279998852",
content: {
type: "json"
}
},
searchable: true,
fixedHeight: false
});

table.on("datatable.ajax.loaded", function() {
this.wrapper.className = this.wrapper.className.replace(" dataTable-loading", "");
var columns = table.columns();
console.log(columns)
columns.hide([2,4,7, 9, 10, 11, 13, 14 ,15 ,16 ,18 ,19]);
});

table.on('datatable.search', function(query, matched) {
console.log(query, matched);
});
</script>

I also try to do Configuring the Whitelist, but i didn't find any option like this in my confluence settings. 

[Minh Tran]

@yapi_hew Have you deployed Confluence under https://ac-html-sandbox.herokuapp.com/ ?

What does https://amazonaws.com/csvtojson.json do in this case?

[yapi_hew]

Thank's for response.

In above question, I have used this script inside my html macro.

I have to use smart-sheet API instead of this, but testing purpose I have hosted smart-sheet data CVS file into aws s3 bucket through ajax request I have to get data from this url and display in my confluence page so that time I get CORS policy error.

Code inside my Html Macro (this is testing purpose) :

<script>
     var settings = {
             "url": "https://amazonaws.com/csvtojson.json",
             "method": "GET",
             "timeout": 0,             
     };

     $.ajax(settings).done(function (response) {
          console.log(response);
     });

</script>

Code inside my Html Macro (I have to use this):

<script>
     var settings = {
             "url": "https://api.smartsheet.com/2.0/sheets/6051615279998852",
             "method": "GET",
             "timeout": 0,
             "headers": {
              "Authorization": "Bearer 26ewfyvoncsebvkpke6bne8o95",
                         "Access-Control-Allow-Origin": "*"
              },
     };

     $.ajax(settings).done(function (response) {
          console.log(response);
     });

</script>

[Minh Tran]

@yapi_hew I don't believe you can control CORS with Amazon S3

That is why you have received the problem with 

<script>
     var settings = {
             "url": "https://amazonaws.com/csvtojson.json",
             "method": "GET",
             "timeout": 0,             
     };

     $.ajax(settings).done(function (response) {
          console.log(response);
     });

</script>

I suggest you to write a server side REST api that one will trigger the smartsheet REST api call and this one will also modify the CORS

So the html macro will contain the code calling this REST api instead of calling the smartsheet api directly and will get over the CORS policy: No 'Access-Control-Allow-Origin'

[Minh Tran]

One similiar discussion i found here is pretty the same as your case https://community.smartsheet.com/discussion/33846/cors-support-for-smarsheet-api-access @yapi_hew 

[yapi_hew]

Thank you very much for you're respond.

If it is possible then give you're feedback on this Question also.

[Minh Tran]

@yapi_hew can you accept my answer if you think it is good?