Chart Export feature is giving CORS issue suddenly.

[Neha44hz]

Expected behaviour

Png, jpg, pdf must download from chart export button

Actual behaviour

Its is giving CORS issue

Live demo with steps to reproduce

Product version

Affected browser(s)

[jszuminski]

@Neha44hz thanks for reporting! Could you please share the exact error message that you're getting in your request/response?

Also, are you just clicking the exporting button on your chart, via the exporting.js module? Or are you sending a custom JSON request?

Please share more details.

[foroozan]

Hello, we are having the same issue, we use highcharts in our website and the issue is reported is Download PNG is not working. exact error is:

Access to fetch at 'https://export.highcharts.com/' from origin '' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

[sharmankita]

I am also facing the same issue. please update once resolved or if there is any workaround ?

[llabend]

Our web application is also encountering this issue. We are running Highcharts 11.4.6 and highcharts-vue 2.0.1

It happens when a user clicks on any of the download options in the hamburger menu of a highchart:

The following errors are printed to the console locally and on higher environments: Access to fetch at 'https://export.highcharts.com/' from origin '' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

POST https://export.highcharts.com/ net::ERR_FAILED 403 (Forbidden)

   Uncaught (in promise) TypeError: Failed to fetch
at index-DFJFBoW7.js:8:46109
at Object.post (accessibility-C--XD5AD.js:3:106404)
at ot.U [as exportChart] (accessibility-C--XD5AD.js:3:112682)
at ot.onclick (accessibility-C--XD5AD.js:3:101042)
at HTMLLIElement.onclick (accessibility-C--XD5AD.js:3:111325)`

[ericoc]

Background

EDIT: Making another reply to my comment with a solution that I discovered this morning.

I am having a similar problem; or at least an extremely similar error message.

I attempted to implement exporting from Highcharts at https://utilities.ericoc.com/ today. However, I am trying to locally host as much as the front-end JavaScript code as possible. I really would like to avoid having to host a Highcharts "export server" as well though?

Example

You can see the error message that occurs when trying to export images from both of my Highcharts charts here:

• https://utilities.ericoc.com/electric/
• https://utilities.ericoc.com/water/

NOTE: The "water" database table contains significantly less data, compared to the electric database table. The water data only contains a single row per day, and therefore water loads significantly faster than electric for all testing purposes.

It happens when a user clicks on any of the download options in the hamburger menu of a highchart

As @llabend stated, nothing happens other than I receive the following CORS error message in the JavaScript console when I click any of the "Download" options in the "Export" hamburger menu of a Highchart, like so:

Screenshot

Console Message

water/:1 Access to fetch at 'https://export-svg.highcharts.com/' from origin 'https://utilities.ericoc.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
exporting.js:11
POST https://export-svg.highcharts.com/ net::ERR_FAILED 403 (Forbidden)
    post	@	exporting.js:11
u	@	exporting.js:11
onclick	@	exporting.js:11
onclick	@	exporting.js:11

exporting.js:11

Uncaught (in promise) TypeError: Failed to fetch
at Object.post (exporting.js:11:7132)
at aH.u [as exportChart] (exporting.js:11:12687)
at aH.onclick (exporting.js:11:2079)
at HTMLLIElement.onclick (exporting.js:11:11418)
post	@	exporting.js:11
u	@	exporting.js:11
onclick	@	exporting.js:11
onclick	@	exporting.js:11
exporting.js:11 Fetch failed loading: POST "https://export-svg.highcharts.com/".

Source Code

The source code for this utilities.ericoc.com Django web application is available here:

• https://github.com/ericoc/utilities
  • My Highcharts instances JavaScript (currently) lives in the Django HTML template files, for example:
    • https://github.com/ericoc/utilities/blob/main/apps/core/templates/base.html
    • https://github.com/ericoc/utilities/blob/main/apps/electric/templates/electric.html
    • https://github.com/ericoc/utilities/blob/main/apps/water/templates/water.html

Data Source (API)

Both of these (electric and water) charts depend upon data gathered via XMLHttpRequest to local Django REST Framework ("DRF") API end-points, which return JSON, and are backed by PostgreSQL:

• https://utilities.ericoc.com/api/
  • https://utilities.ericoc.com/api/electric/
  • https://utilities.ericoc.com/api/water/

This seems to be working well to gather display the data in the chart (as well as to provide data for a DataTables JavaScript table on the same page).

CDN?

I imagine that if I used the Highcharts CDN (rather than hosting my own JavaScript files), this would probably not occur? I may test this CDN theory at some time in the future, and will try to update here if so.

[ericoc]

Including this additional Highcharts JavaScript library file locally seems to have resolved my issue!

https://code.highcharts.com/modules/offline-exporting.js

as can be seen on any of these pages using Highcharts, where exporting images seems to work okay now:

https://utilities.ericoc.com/electric/ https://utilities.ericoc.com/natural_gas/ https://utilities.ericoc.com/water/

using the following locally hosted/referenced Highcharts JavaScript per:

https://github.com/ericoc/utilities/blob/b7bf0771827ecdb7dbbd08c18194cedf549c1fd3/apps/core/templates/base.html#L26-L30

[Vitalii-001]

Including this additional Highcharts JavaScript library file locally seems to have resolved my issue!

https://code.highcharts.com/modules/offline-exporting.js

as can be seen on any of these pages using Highcharts, where exporting images seems to work okay now:

https://utilities.ericoc.com/electric/ https://utilities.ericoc.com/gas/ https://utilities.ericoc.com/water/

using the following locally hosted/referenced Highcharts JavaScript per:

https://github.com/ericoc/utilities/blob/b7bf0771827ecdb7dbbd08c18194cedf549c1fd3/apps/core/templates/base.html#L26-L30

Yep, this is indeed a working solution. Just tested it. Thanks!

[ericoc]

@Vitalii-001 awesome - thanks for confirmation! :)

@llabend would you be able to confirm whether you are including the offline-exporting.js JavaScript? If not, I would totally suggest that it might be worth giving it a shot since our error messages were so similar!

[llabend]

@ericoc Yes! Thank you for your detailed notes & solution, I really appreciate it. After testing locally, I deployed to my DEV environment to test out the changes there and can confirm that including the OfflineExporting module from Highcharts seems to have resolved the issue for our project.

For any Vue 3 users out there, I imported the module within each of our chart components: import OfflineExporting from 'highcharts/modules/offline-exporting';

and then included it with the other Highcharts function calls: OfflineExporting(Highcharts);

Exporting works again. 🥳

[shiddugmail]

Thank you everyone in this thread.

Especially @ericoc Thank you so much for the inputs to add offline-exporting.

I added following lines in our common component HIghChartComponent.js

import OfflineExporting from 'highcharts/modules/offline-exporting'; OfflineExporting(Highcharts);

And it worked nicely.

[mujtaba36]

"@shiddugmail Could you please confirm which version of Highcharts you are using? I am currently using Highcharts 11.4.0, but it is not working for me."

[shiddugmail]

"@shiddugmail Could you please confirm which version of Highcharts you are using? I am currently using Highcharts 11.4.0, but it is not working for me."

Hi @mujtaba36 following are the versions I am using.

"highcharts": "^11.4.3"
"highcharts-react-official": "^3.2.1"

Hope this helps.

[joseph-luketelo]

Including this additional Highcharts JavaScript library file locally seems to have resolved my issue!

https://code.highcharts.com/modules/offline-exporting.js

as can be seen on any of these pages using Highcharts, where exporting images seems to work okay now:

https://utilities.ericoc.com/electric/ https://utilities.ericoc.com/natural_gas/ https://utilities.ericoc.com/water/

using the following locally hosted/referenced Highcharts JavaScript per:

https://github.com/ericoc/utilities/blob/b7bf0771827ecdb7dbbd08c18194cedf549c1fd3/apps/core/templates/base.html#L26-L30

This worked for me as well, thank you!