How to set Access-Control-Allow-Origin Policy properly

Support
, ,
#1

Hi there,

I am trying to access json resources stored in a azure storage account.

In my javascript code I have this:
//return await fetch('https://cors-anywhere.herokuapp.com/https://storage4updater.blob.core.windows.net/public-data/export.json' )

    return await fetch('https://storage4updater.blob.core.windows.net/public-data/export.json')

    .then((res) => res.json());

The commented code works, but the uncommented one doesnt, so it must be because of cors configuration.

I read about it and tried to add this to my netlify.toml file:

[[headers]]
  # Define which paths this specific [[headers]] block will cover.
  for = "/*"
    [headers.values]
    Access-Control-Allow-Origin = "https://storage4updater.blob.core.windows.net/*"

still no success,

what is the correct way to configure this so that my website can read a json file from an external source?

#2

Hi, @RagnaRock, I see the header returned so you did add the header:

$ curl -svo /dev/null https://<site-subdomain-here>.netlify.app/  2>&1 | egrep '< access-control'
< access-control-allow-origin: https://storage4updater.blob.core.windows.net/public-data/export.json

However, I’m not sure if this is the header rule you need or not.

Our support team can troubleshoot the header itself (for example, we can troubleshoot if the header being sent as it was designed). Our support team doesn’t have the resources to answer the question about what the header itself should be though. We can only troubleshoot our service here on the community site.

Someone else here on the community site may be able to assist you if the question is about what the header itself should be. The question about what header to make is welcome, but I wanted to set expectations correctly about whether or not our support team would answer that question.

Again, this question is definitely welcome and if you have any header rules not returning the correct headers, please let us (the Netlify support team) know.

#3

I did uncomment the commented code instead in order to be able to continue testing.

How can I execute that curl command?

#4

hi @RagnaRock - curl is a command you would run in your terminal window. A little more info:

You might want to google how to do this for your specific operating system. Let us know if you need more assistance.

#5

running this: curl -svo 'test.txt' https://myapp.netlify.app/.netlify.app/ 2>&1 | egrep '< access-control' < access-control-allow-origin: https://storage4updater.blob.core.windows.net/public-data/export.json I get nothin in test.txt (im not sure i understood it correctly but i thought this is suposed to store the output in that file test.txt, i’m running it on windows)

but doesn’t this need to be executed from within my website “pod” ?

I thought i had to connect somehow to the pod that is serving my website and run that command there, so i can see what headers it is using.

(the bit in how to connect to it and be able to execute commands there is the part i don’t know)

#6

Hi,

The command is curl -svo /dev/null https://<site-subdomain-here>.netlify.app/ 2>&1 | egrep '< access-control'. It doesn’t include the second line since that is the result of the command. This command also returns the result in the console and not in a ‘test.txt’ file. Let us know if you see the header with that command.

Additionally, for reference, you won’t be able to access your website ‘pod’ since ‘pods’ don’t exist at all. We serve all websites through our CDN and not individual ‘pods’