CORS issue in React App for download data indexedDB

Support
, ,
1

Hi Everyone!

I’ve already tried solutions from this forum, without success (which is why I’m creating this new post).

Here is the deployed site: https://cmf-app.netlify.app/

I am trying to retrieve a base 64 image that I save with indexedDB.
But it throws me this error:

Access to XMLHttpRequest at 'https://thetrymysadoroh.site/cu/gmlt3.js?eid=iobnfmmhgefpdgcdpocaceafmoocljnb' from origin 'https://cmf-app.netlify.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I have tried to configure the netlify.toml file but I don’t really know how to do it, please if you could help me. Thanks.

netlify.toml

[[headers]]
  # Define which paths this specific [[headers]] block will cover.
  for = "/*"
  [headers.values]
  Access-Control-Allow-Origin = "*"
2

Hi @JGPcode,

Just to be sure, is https://thetrymysadoroh.site/ something you control or a 3-rd party API?

If it’s something you can control, you should be able to add CORS headers to allow your website to access it.

If it’s out of your control, you should add the following to your netlify.toml:

[[redirects]]
  from = "/api/*"
  to = "https://thetrymysadoroh.site/:splat"
  status = 200
  force = true

Then, in your frontend, you could access the API like:

/api/cu/gmlt3.js?eid=iobnfmmhgefpdgcdpocaceafmoocljnb

and it would rewrite to the target URL.

3

Thank you very much, I use this library ( Localbase) to save data in indexedDB:

I get my data saved like this on the frontend:

const objCardPhoto = db.collection('cardsPhotos').doc('fileUpload0').get();

Sorry but I don’t understand how to access the API like this:

/api/cu/gmlt3.js?eid=iobnfmmhgefpdgcdpocaceafmoocljnb

and then rewrite to the target URL.

4

/api/cu/gmlt3.js?eid=iobnfmmhgefpdgcdpocaceafmoocljnb would go in your front end.

So you could call the API like:

fetch('/api/cu/gmlt3.js?eid=iobnfmmhgefpdgcdpocaceafmoocljnb'`).then(response => ...