Skip to main content
added 8 characters in body
Source Link
Robs
  • 9.4k
  • 21
  • 119
  • 224

I am trying to use a Google Charting library which is hosted by Googleinside a Lightning Aura Component.

I am trying to use a Google Charting library which is hosted by Google.

I am trying to use a Google Charting library inside a Lightning Aura Component.

Source Link
Robs
  • 9.4k
  • 21
  • 119
  • 224

Blocked by CORS policy: No 'Access-Control-Allow-Origin' header on the requested resource

I am trying to use a Google Charting library which is hosted by Google.

Component

<aura:component implements="flexipage:availableForAllPageTypes">
    <ltng:require scripts="{!$Resource.google_gantt_chart}" afterScriptsLoaded="{!c.afterScriptsLoaded}" />
    <div aura:id="chart"></div>
</aura:component>

Resource google_gantt_chart as been added to static resources. But it still trys to load the latest library from Google.

JavaScript Controller

({
    afterScriptsLoaded: function (cmp, event, helper) {

        google.charts.load('current', { 'packages': ['gantt'] });
        google.charts.setOnLoadCallback(drawChart);

        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Task ID');
        data.addColumn('string', 'Task Name');
        data.addColumn('date', 'Start Date');
        data.addColumn('date', 'End Date');
        data.addColumn('number', 'Duration');
        data.addColumn('number', 'Percent Complete');
        data.addColumn('string', 'Dependencies');

        data.addRows([
            ['Research', 'Find sources',
                new Date(2015, 0, 1), new Date(2015, 0, 5), null, 100, null],
            ['Write', 'Write paper',
                null, new Date(2015, 0, 9), daysToMilliseconds(3), 25, 'Research,Outline'],
            ['Cite', 'Create bibliography',
                null, new Date(2015, 0, 7), daysToMilliseconds(1), 20, 'Research'],
            ['Complete', 'Hand in paper',
                null, new Date(2015, 0, 10), daysToMilliseconds(1), 0, 'Cite,Write'],
            ['Outline', 'Outline paper',
                null, new Date(2015, 0, 6), daysToMilliseconds(1), 100, 'Research']
        ]);

        var options = {
            height: 275
        };

        var chart = new google.visualization.Gantt(cmp.find('chart'));

        chart.draw(data, options);
    }
})

But I am getting this error:

Access to XMLHttpRequest at 'https://www.gstatic.com/charts/46.2/loader.js' from origin 'https://example--sandbox.lightning.force.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I have set up CORS, Content Security Policy Trusted Sites and Remote Site Settings for the domain https://www.gstatic.com yet I still get the error.

What can I do to fix this?