CORS blocked on custom domain - pages

[metasikander]

Background

I have set up a hugo site on Cloudflare pages, built from my github repo

Issue

The site works on the dev-address, but on my main address i get Cross-Origin Request Blocked errors and sha512/256 errors.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://static.cloudflareinsights.com/beacon.min.js/v652eace1692a40cfa3763df669d7439c1639079717194. (Reason: CORS request did not succeed). Status code: (null).
None of the “sha512” hashes in the integrity attribute match the content of the subresource. lhote.me
None of the “sha256” hashes in the integrity attribute match the content of the subresource. lhote.me
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://static.cloudflareinsights.com/beacon.min.js/v652eace1692a40cfa3763df669d7439c1639079717194. (Reason: CORS request did not succeed). Status code: (null).
None of the “sha512” hashes in the integrity attribute match the content of the subresource. lhote.me

I have set up a _headers-file with the following content in the output folder, and the build job outputs Parsed 1 valid header rule.

/*
  Access-Control-Allow-Origin: *

I’ve tried everything i can think of, but i’m not able to fix my issue. Any insights are highly appreciated!

[M4rt1n]

I had the very same error some time ago and did manage to solve it. While the CSS and hash seems to be correct it triggers an integrity miss. I would recommend disableling Cloudflares minification on:

• CSS
• JS

then try again.
I quickly checked the SRI and it seems to be correct: https://zinoui.com/tools/sri-generator?algo=sha256&url=https%3A%2F%2Flhote.me%2Fassets%2Fcss%2Fstylesheet.bc1149f4a72aa4858d3a9f71462f75e5884ffe8073ea9d6d5761d5663d651e20.css

But after a second “validation” the tool reports a different SRI-hash. That very likely is due to Cloudflare now cached and optimized (minificated) the CSS file.

[M4rt1n]

I see the problem is resolved.
Since you generated your page with Hugo, please minify your ressources within Hugo like this:

{{ with resources.Get "assets/css/stylesheet.css" }}
	{{ $CSS := resources.Get "assets/css/stylesheet.css" }}
	{{ $CSS := $CSS | resources.Minify }}
	{{ $hash_CSS := $CSS | resources.Fingerprint "sha256" }}
	<link rel="preload stylesheet" href="{{ $hash_CSS.RelPermalink }}" integrity="{{ $hash_CSS.Data.Integrity }}" as="style" type="text/css" crossorigin="anonymous">
{{ end }}

(feel free to optimize the processflow and performance by using Hugo pipes)

That should minify the resource and deliver it optimally.

[metasikander]

Okay. Thank you.
That seems to have fixed it.

[metasikander]

Great. I’ll look into that too!