CORS issue with static files

I’m trying to display a WebGL app in a Bubble page. There are a bunch of resource files that need to exist in known/fixed paths. I used the “hosting files in root directory” approach with a file path, as suggested elsewhere by @emmanuel.

However, on my live site I see lots of errors in the console along the lines of:

x6:6 Access to XMLHttpRequest at ‘https://s3.amazonaws.com/appforest_uf/f1588443984494x423979562281436600/responsive.javascript?AWSAccessKeyId=AKIAIUMZEBL2PSHM4AZQ&Expires=1588446437&Signature=h5WtCpiVf28WJ1oie%2F1tI4ZINkM%3D’ (redirected from ‘https://mysite.com/TemplateData/handy.javascript’) from origin ‘https://mysite.com’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

I looked up the error, and every fix I saw starts with the phrase, “If the server is under your control…” which it isn’t in this case since it’s under Bubble’s control.

How, exactly, do I resolve this?

2 Likes

Are you using your AWS storage or Bubble one?

Honestly, I’m not sure. The files are uploaded through the “Hosting files in the root directory” option within settings – see attached screenshot. However, within the browser they show as being served from AWS (presumably because Bubble’s storage uses AWS?).

1 Like

Where do you want to use this?
The link in your first post doesn’t make sense with the use of this hosting files in the root directory that should be served using your app root url with the name of file like:
appname.bubbleapps.io/asselinks.json (or using your domain)
also, even if you put in the name a kind of “folder” I don’t think it create a folder at the root of your app. This is just for displaying a name to the file uploaded, but the file url doesn’t use this I’m pretty sure

As I said in the original post, I have a folder full of support files that need to be called by a WebGL app embedded in the page. For that to work, I have to have a known file path to the folder.

I can side-step the entire thing by using an iFrame, but that causes a host of other issues.

The first file in the screenshot (assetlinks.json) is supposed to be in the root folder. That one works correctly.

The issue is with the files that are supposed to be in a folder.

As for having a folder, this is exactly the use case @emmanuel described in his Aug '18 update:

" We just pushed an improvement to this feature that lets you have a file name that contains a path. This will give you more flexibility if you need to host some files in some “folders”. For instance, if you want to use Apple Pay, you could something like

"

I presume it’s creating some kind of link, not actually creating a folder structure, but it’s supposed to work…

1 Like

You are right. I confirm that this create a “folder” that redirect to the file in AWS.
I think that you should ask Bubble support for that. I personnally doesn’t have CORS issue. So I think it’s may be a bug for you

It’s nice to know I’m special :slight_smile:

2 Likes

Are you using your own domain?
If yes, try the root file using the bubbleapps.io url to see if this work. I tested on an account that doesn’t have a custom domain so this may explain the issue.

I am using my own domain, and on a paid plan.

I was using relative URLs. I tried full/explicit URLs and URLs using the bubbleapps.io URL. Same errors every time.

But it was a good thought…

2 Likes

I think the issue you’re encountering is caused by bubble version 6 – see this thread Hosted root files no longer being displayed under domain

2 Likes

Yup. I think you may be right.

If I use the link revealed under the “see” option (the direct link to the file on S3), I no longer get the CORS issue. However, it breaks everything else I am trying to do.

The webGL app expects certain files to be in specific folders. I have no control over that, and not all of the necessary files are referenced directly from my HTML.

As I pointed out to the Bubble Support tech, there doesn’t seem to be much point in allowing me to set a “fake” filestructure if I can’t actually use it.

1 Like

For anyone following this thread…

I got most files to work if I used the full path to the file from the “see” link (next to the file name in the Settings/SEO tab).

For example:

https://s3.amazonaws.com/appforest_uf/f1588xxxxxxxxxxxxxxxxxxxxxx00/favicon.ico

However, some files still failed. It seems as though there may be a bug in Bubble with files that have multiple “.” in the file name. One of the files I need to access is called WebBuild.wasm.code.unityweb (I have no control over the name of the files). I could not get that file to work no matter what I did. Support have filed a bug report.

The key thing to know (and what I had misunderstood) is that the CORS policy needs to be set on the server you are pulling files from, not the server you are calling the files from. So if you have files stored on Server X and your Bubble app is Server Y, you need to set the CORS policy on Server X.

What I ended up doing was hosting the files on a server I control, adding the appropriate CORS setting to that server and sidestepping Bubble root file uploading entirely.

Fortunately, I already had a server with excess capacity that I could use for this. If you run into this issue and cannot host the files on a separate server, just try to avoid more than one period in your file names and use the full path to the s3 location where the file is actually stored. Then you should be all set.

3 Likes

@nick12 Sorry If I didn’t mention that the CORS policy need to be set on “amazon” side in your case. But… don’t forget that this AWS Bucket is owner by Bubble. So they should fix this issue because they can :wink:

1 Like

No worries, and I agree. In fairness to Bubble, it seems to more or less work as long as you don’t have silly filenames with multiple periods in them…

This topic was automatically closed after 70 days. New replies are no longer allowed.