[SalesForce] Blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header on the requested resource

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?

Best Answer

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.

Related Topic