0

I've created a static website using Astro on a private GitHub repository. I was able to connect it to Netlify. Everything is fine and I also get builds deployed; But when I load the main page (index.html at, let's say, https://example.com/) I get CORS error (I guess regarding to assets loading from Cloudflare CDN):

Access to script at 'https://d33wubrfki0l68.cloudfront.net/js/0f2b5ea850b0bc00d0d93eb733c74d30fdfc396f/assets/hoisted.e9f943e8.js' from origin "my domain" has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I've tried adding a netlify.toml file at the root of my project (next to other configuration files) with the following content:

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

I've also tried adding a _headers file to the public directory (which gets built right next to the index.html file) with the following content:

/* 
  Access-Control-Allow-Origin: *

Neither have solved the problem and I get the same error. BTW, it's only on this page, because I have another page called terminal (https://example.com/terminal) which uses lot's of JavaScript and everything works fine.

Anyway, I had to deploy my website manually instead of having the project connected to the GitHub repository and couldn't leverage Netlify's asset handling (compared to what I get right now) or automatic builds.

What should I do?

Even if I were just able to tell Netlify not to put these scripts on the CDN at the first place, that would solve the problem; since deploying the dist folder manually solves the issue, and I don't really need the CDN because my website is doing pretty well regarding GTMetrix stats

Shayan
  • 21
  • 5
  • Edit your question and add the client code. – jub0bs Jul 17 '23 at 16:44
  • 1
    @jub0bs What do you mean by _client code_? What should I exactly include? – Shayan Jul 17 '23 at 19:20
  • By _client code_, I mean the code in your frontend responsible for sending a request to your server. – jub0bs Jul 17 '23 at 20:03
  • 1
    @jub0bs I actually don't have any API call on the client side, I believe the CORS error is caused by Netlify hosting bundled JavaScript files on Cloudflare's CDN to boost performance. – Shayan Jul 18 '23 at 05:11
  • Loading a cross-origin script from some CDN doesn't usually trigger CORS. Anyway, you should add a [MWE](https://stackoverflow.com/help/minimal-reproducible-example) that reproduces the problem. – jub0bs Jul 18 '23 at 08:03
  • @jub0bs I'd love to do that, but have no idea how to MWE a deployment problem. Just imagine a simple, static HTML file which is bundled for build (mostly just compressed) and there are references of a couple script tags with hashed names on a CDN which cause the CORS error and don't get loaded. – Shayan Jul 18 '23 at 08:44
  • "Imagine"? You likely won't get much help on this site if you cannot provide code that reproduces the issue. Why can you not add a minimal version of that static page that triggers the CORS error? – jub0bs Jul 18 '23 at 10:29
  • @jub0bs Because I have no idea how/why it happens, leave alone re-creating it! – Shayan Jul 18 '23 at 11:18
  • Then dump the entire static page in your question. – jub0bs Jul 18 '23 at 11:42
  • 2
    @jub0bs So I started playing around with a demo to then share here (it would be insane to share the entire codebase) when I suddenly figured out the problem, thanks anyway. – Shayan Jul 18 '23 at 20:36
  • Good for you, but I'm not surprised: reducing a problem is key to solving it. – jub0bs Jul 18 '23 at 20:57

1 Answers1

1

It turns out all I had to do was to add this piece of code to the Astro configuration file (astro.config.mjs in my case):

import { defineConfig } from 'astro/config';
// other imports

export default defineConfig({
    // other configs

    vite: {
       build: {
          rollupOptions: {
             output: {
                entryFileNames: '[name]-[hash].js',
             },
          },
       },
    },
});

Which tells Astro to bundle all client-side js files and add them to the root of the build directory (dist in my case) instead of a subfolder like assets or whatever.

Shayan
  • 21
  • 5