Using uploaded assets for 3D/WebVR applications (https://aframe.io). To use uploaded images as textures, these assets are fetched via XHRs. Because the uploaded images on Glitch are not served with CORS, the assets do not work for 3D/WebVR applications.
Thanks for the report, I’ll try and fix this right away!
1 Like
I’m looking into this and it seems that CloudFront is caching the non-CORS version of the asset if it is ever first requested in a non-CORS manner. A possible workaround would be to append a query-string value to your asset URLs like https://cdn.glitch.com/.../&domain=your-domain this way it will be sure to fetch with the correct CORS headers.
We’re looking into a way to make this work better without workarounds, but with AWS who knows 
Hope this helps!
1 Like
I’m having the same issue as @ngokevin since I’m also trying to use images as input to WebGL.
Just to make sure I understand your suggestion: I have an asset with the CDN URL https://cdn.glitch.com/d0ad5d11-e16a-4f43-a924-4622bc6bfb24%2Fcircle-transparent-BG.png?1490194303731 and my project is at https://night-mailbox.glitch.me
Are you suggesting I change the URL to https://cdn.glitch.com/d0ad5d11-e16a-4f43-a924-4622bc6bfb24%2Fcircle-transparent-BG.png?1490194303731&domain=night-mailbox.glitch.me
Yes, by using an additional querystring parameter when you fech the resource using CORS it should return a version with the correct headers. An important thing to note is to only use the extra querystring parameter in the CORS request and not in any other non-CORS get request.
So to be completely explicit:
Use https://cdn.glitch.com/d0ad5d11-e16a-4f43-a924-4622bc6bfb24%2Fcircle-transparent-BG.png?1490194303731 as the url when the resource shows up in image tags or other places that don’t send CORS headers with the request.
Use https://cdn.glitch.com/d0ad5d11-e16a-4f43-a924-4622bc6bfb24%2Fcircle-transparent-BG.png?1490194303731&domain=night-mailbox.glitch.me when making your request from JavaScript using CORS headers.
By keeping both of them separate you won’t run into the issue of the non-CORS requests being cached and returned when you intend to make a CORS request.
Hope this helps!
Alas, this doesn’t fix it. The browsers still see the image as insecure and won’t render the texture.
Also problematic if anyone ever tries to remix the project, we can’t really hardcode domain names.
Also problematic if anyone ever tries to remix the project, we can’t really hardcode domain names.
ya,I assumed this was a temporary fix.
The specific domain or query string addition doesn’t really matter since the requests are returned with * as the allowed origin. The only important thing is that the request is made with CORS headers first so that a non-CORS response isn’t cached.
The first request was made without CORS (just accessing the url from the browser). The second request was made with CORS (calling fetch("https://cdn.glitch.com/d0ad5d11-e16a-4f43-a924-4622bc6bfb24%2Fcircle-transparent-BG.png?1490194303731&o_0") from a site with a different domain).
Once the resource with a specific query string is cached it generally stays cached with whatever response headers it had. It looks like this caching is happening at the browser layer so I’ll see about adding a Vary header that should resolve it. Thanks again for the report!
I just released an update to our CloudFront settings, so any new assets should have CORS headers set up for any request type and this workaround will no longer be necessary.
3 Likes
Awesome!
I thought our project had good support, but your response times are amazing. Love everything about Glitch, and planning on using it for A-Frame (https://aframe.io) projects, workshops, and learning materials.
Thanks, Daniel!
4 Likes
Hello, I created an express app that should send a response to another app running on my local machine. On my local I get this error when using the request library, this is in the console:
Fetch API cannot load https://improbable-marco.glitch.me/. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:3000’ is therefore not allowed access. The response had HTTP status code 404. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.
Any ideas how to solve this?
I’m not sure I understand what you’re trying to do.
Is code in improbable-marco trying to connect to your machine? From the error it looks like you’re trying to use localhost:3000 as the address, but that won’t work if the code is running in Glitch - localhost will be the Glitch server.
In general for this kind of error, you would add CORS headers, but I’m not sure if that would help, or if it would be safe security-wise without knowing more about what you’re trying to do. Something like this will add the headers:
res.header("Access-Control-Allow-Methods", "GET, PATCH, POST, PUT, DELETE, OPTIONS")
res.header("Access-Control-Allow-Origin", "*")Same problem here.
I used the solution described here to solve it.
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});