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

Question

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

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?

Answer 1

If additional script resources are necessary, they will be denied because of Lightning's very restrictive CSP. You cannot fix this. As an alternative, consider using D3js, which can run without any external assistance, or find another alternative that can run without outside scripts.