Endless CORS frustration! "Access-Control-Allow-Origin: *" and still blocking XMLHttpRequest!

Support
,
1

Here’s the site. noahgrice-betterdark.netlify.app

I am trying to use a jQuery AJAX request to determine if a link contains a valid image. My code is functional, but the image refuses to load due to a CORS blocking error message.

var url = "https://foo.bar";
$.ajax({
    url: url,
    type: 'GET',
    success: function() {
        console.log('Successfully loaded image');
    },
    error: function() {
        console.log('Failed to load image');
    }
});

My “_headers” and “netlify.toml” files are both present and both have “Access-Control-Allow-Origin” set to “*”. I’m still confused as to why it still says my header is not present.

“_headers”:

/*
    Access-Control-Allow-Origin: *

“netlify.toml”:

[build]
    publish = "public"

[[plugins]]
    package = "netlify-plugin-gatsby-cache"

[[plugins]]
    package = "netlify-plugin-image-optim"

[[plugins]]
    package = "@netlify/plugin-sitemap"

[[headers]]
  for = "/*"
    [headers.values]
    Access-Control-Allow-Origin = "*"

This is definitely not the first time I’ve tried to fix this problem, it seems to chase me constantly. Please tell me what I’m doing wrong?

Thank you,
Noah

2

Noah without seeing the error I can’t tell but are you sure it’s not a case of https://foo.bar server not sending the CORS header? If you have control of https://foo.bar you can modify it to send the header otherwise i’m not sure there’s much you can do here.

3

I unfortunately do not have access to the URL path to do anything custom there. The error I’m seeing in my Chrome devtools is as follows:

Access to XMLHttpRequest at 'https://foo.bar' from origin 'https://noahgrice-betterdark.netlify.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

This error is confusing to me because the header is present in my “_headers” and “netify.toml” files. When uploading the most recent deploy, it even says “2 header rules processed with no errors.”

Not sure what to do!

4

@noahgrice I am super noob with Netifly but I believe the _headers file is to define headers you want your serverless functions to send when they get a request. It’s not going to have an effect on the foo.bar server and what headers it will send.

5

Hi, @noahgrice. I agree with @jszynal on this. You header is present:

$ curl --compressed -svo /dev/null https://noahgrice-betterdark.netlify.app/  2>&1 | grep 'access-control-allow-origin'
< access-control-allow-origin: *

The issue here is not a missing header because the header is there.

I think this StackOverflow post may be helpful:

If there are other questions after reading that, please let us know.

6

Hi @noahgrice

Is it the URL one might enter in the background image input? If so, it is nothing to do with Access-Control-Allow-Origin of your site, but that of the site the image is loaded from.

For example enter one of your portfolio images: https://www.noahgrice.com/img/portfolio/motion/exility.jpg and you’ll see it will load. Why? Because the headers for the image are allowing it

% curl -I https://www.noahgrice.com/img/portfolio/motion/exility.jpg
HTTP/2 200
accept-ranges: bytes
access-control-allow-origin: *
age: 2
cache-control: public, max-age=0, must-revalidate
content-type: image/jpeg
date: Wed, 12 Oct 2022 04:47:26 GMT
etag: "f6cd6850210c8455163769a4209fe12b-ssl"
server: Netlify
strict-transport-security: max-age=31536000
x-nf-request-id: 01GF589NKNVZCJETFHEYA2BPEM
content-length: 7538

However try using https://hgjhi08oihlnk.netlify.app/api-domain.jpg and it won’t, because that header is missing

% curl -I https://hgjhi08oihlnk.netlify.app/api-domain.jpg
HTTP/2 200
accept-ranges: bytes
age: 2
cache-control: public, max-age=0, must-revalidate
content-type: image/jpeg
date: Wed, 12 Oct 2022 04:50:55 GMT
etag: "b7cd5a857e42c2d1e8f255d9882706f3-ssl"
server: Netlify
strict-transport-security: max-age=31536000; includeSubDomains; preload
x-nf-request-id: 01GF58G1G52GZYFBQZZZ745SXF
content-length: 202382

The fact that you have Access-Control-Allow-Origin: * on your site means any site can load any resource without issue, image, CSS, JS, etc. because you have explicitly permitted it. This is potentially not what you want.