Access-Control-Allow-Origin -> Solution: disable post processing

Hi,

I have a Access-Control-Allow-Origin problem :confused:

I do have a _heades file in my deployment folder, but it does not do the trick. What can I do?

/*
  Access-Control-Allow-Origin:*

Hmm, that should works…

If you have a unix terminal, try doing curl -I https://<site>.netlify.app. Can you see the header there?

If you don’t have a unix terminal, you can use https://reqbin.com/curl, just paste the command there, press Run, and check the result on the Headers section.

Oh, and you may want to check that the Access-Control-Allow-Origin problem is not a result of requesting resources from other site. If that is the case, the other website will need to be the one sending the header.

Thxs haranto,

This is curl result:

$master curl -I https://master--restate.netlify.app/

HTTP/2 200
access-control-allow-origin: *
age: 0
cache-control: public, max-age=0, must-revalidate
content-type: text/html; charset=UTF-8
date: Mon, 05 Sep 2022 15:06:20 GMT
etag: "1ee1f9422834bedbb060ae95e7a63774-ssl"
server: Netlify
strict-transport-security: max-age=31536000; includeSubDomains; preload
x-nf-request-id: 01GC730A7HKN0JT8NGBWFHS29M

So the the access-control-allow-origin header is present. But if you open app the site, you still get an error in the browser: https://master--restate.netlify.app/

:confused:

Hi, this is the result:

HTTP/2 200
access-control-allow-origin: *
age: 0
cache-control: public, max-age=0, must-revalidate
content-type: text/html; charset=UTF-8
date: Mon, 05 Sep 2022 15:06:20 GMT
etag: "1ee1f9422834bedbb060ae95e7a63774-ssl"
server: Netlify
strict-transport-security: max-age=31536000; includeSubDomains; preload
x-nf-request-id: 01GC730A7HKN0JT8NGBWFHS29M

But if you open the site https://master--restate.netlify.app/ you still get CORS errors.

Hi, this is the result:

HTTP/2 200
access-control-allow-origin: *
age: 0
cache-control: public, max-age=0, must-revalidate
content-type: text/html; charset=UTF-8
date: Mon, 05 Sep 2022 15:06:20 GMT
etag: "1ee1f9422834bedbb060ae95e7a63774-ssl"
server: Netlify
strict-transport-security: max-age=31536000; includeSubDomains; preload
x-nf-request-id: 01GC730A7HKN0JT8NGBWFHS29M

Yup, the header is shown here. So, basically, the headers you put on your _headers file (or netlify.toml) will be returned with every request made to your site.

So, everything is working as intended with the headers file.

If you are still having issues, you might want to check that the requested resources on your site have the headers as well.

More on how Access-Control-Allow-Origin header work at javascript - How does Access-Control-Allow-Origin header work? - Stack Overflow

Nope - it is not. The missing resource is a javascript file, that should be served by netlify - but is missing. I get a 404. The 404 response contains not access header, and that is why I thought it is a CORS problem.

The missing javascript file is part of the bundle, i checked. It seems, that netlify is redirecting the request to cloudfront, but cloudfront does not know about this js file.

Hey @uwinkler

Can you share the site you are having issues with?

Found this: CORS issue with Vue 3 Vite Build - #8 by Roxas92

I assume it could be the same issue with post-processing?

1 Like

Thank you hartanto, that was the problem. Disabling post-processing did the trick. Everything is working well now.

1 Like