CORS issue with Vue 3 Vite Build

Support
1

Hey guys,

my project is currently using Vue CLI and everything including the deployment via Netlify is working great. Today I wanted to try out to migrate to Vite. I set up everything locally and it worked. I then wanted to make a preview via Netlify but the page did not load because the “main application” was not able to load the desired chunks because of CORS.

For me CORS always only was something on the Backend-Side and I therefore have no real experience with that.

Any idea how to solve that issue?

URL is: https://deploy-preview-582--music2me.netlify.app/

image

2

Hey Roxas,

You’re gonna wanna check this out on how to include that header, to access the resource.

3

Hey Pie,

thank your for the response. I should have mentioned that before I opened this issue, I already made some research in the forums and came across your linked thread. I then added a _headers file in my public folder with the following content:

/*
  Access-Control-Allow-Origin: *

But that unfortunately didn’t work. Now that you explicity linked that thread as a help I tried the netlify.toml-approach and edited my netlify.toml, now it looks like this

[build]
    # ignore all PRs opened by `dependabot` (with last commit made by `dependabot`)
    ignore = 'git log -1 --pretty=%B | grep dependabot'

# The following redirect is intended for use with most SPAs that handle
# routing internally.
[[redirects]]
    from = "/*"
    to = "/index.html"
    status = 200

[[headers]]
    # Define which paths this specific [[headers]] block will cover.
    for = "/*"
        [headers.values]
        Access-Control-Allow-Origin = "*"

But I still receive the same CORS-error. Looking at the netlify build log I see that everything should have worked:

image

4

Hi @Roxas92 ,

The header you have set is present:

curl -IL https://deploy-preview-582--music2me.netlify.app/
HTTP/2 200
access-control-allow-origin: *
cache-control: public, max-age=0, must-revalidate
content-length: 1078
content-type: text/html; charset=UTF-8
date: Mon, 28 Jun 2021 09:50:50 GMT
etag: "8225dc2fda05882355a8ded0a9d4c332-ssl"
strict-transport-security: max-age=31536000; includeSubDomains; preload
age: 0
x-robots-tag: noindex
server: Netlify
x-nf-request-id: 1f419297-0f33-4576-a7a2-22e32944aea0

Additionally, visiting the blocked script https://d33wubrfki0l68.cloudfront.net/js/3716626c91e487cf38233945435e03c2b251c18c/assets/vendor.9800afec.js results in CDN object Not Found - Request ID: 631bdb86-02f8-4f17-9e09-308c6356dfc2

5

But this comes from netlify, doesn’t it? I don’t upload any file manually or point them to cloudfront. Interesting though, when I try to access the file manually over the preview URL, it’s working: https://deploy-preview-582--music2me.netlify.app/assets/vendor.9800afec.js

So is there any error going on (on netlify side) while building/uploading or do I have to make any adjustments to my settings?

6

In your <head> you have:

<script type="module" crossorigin src="https://d33wubrfki0l68.cloudfront.net/js/3716626c91e487cf38233945435e03c2b251c18c/assets/index.b2cd7f4b.js"></script>

this file also exists at /assets/index.b2cd7f4b.js (on your app URL.) Both versions of the file are identical. In them is a single reference to ./vendor.9800afec.js with all other references being /assets/vendor.9800afec.js. When /assets/index.b2cd7f4b.js is loaded from Cloudfront the ./vendor.9800afec.js fails to load because of CORS/404.

Also in your head is

<link rel="modulepreload" href="/assets/vendor.9800afec.js">

which is the local version of the file (for preloading.)

I am unable to speculate on what is happening on Netlify’s side. A Support Engineer will have the resources to comment on that. The possibility of a setting (or settings) that aren’t configured correctly is always a possibility.

1 Like
7

The Cloudfront URLs are a result of post processing, which you may wish to disable: Loading ES module is blocked in production - #5 by Dennis

1 Like
8

That fixed the issue - thx!