nhost/hasura-storage

CORS headers not set

mmmoli opened this issue · 2 comments

mmmoli commented

Hi folks. Love this!

I think I'm coming-up against an issue with CORS headers.

Situation

  • React.js app.
  • nhost is running locally using CLI v0.6.10 (nhost/Hasura Storage:0.1.5)
  • Successfully uploading file (.glb - 3D file format)
  • Load web page that pulls from nhost storage and attempts to render .glb.
  • Errors in console. App blows up.

Detail

  • Tried hot-loading a remote .glb file. Success in app! 😎
  • Downloaded said file, spun-up a small http-server. Success in app! 😎
  • Uploaded said file through my nhost + react.js app. Signed-url. Fail 💩.
  • Uploaded said file through nhost + react.js app. Unsigned-url. Fail 💩.

Notes

  • In all cases above, hitting the URL from my browser directly, downloads the file – no 403 or 404 errors
  • Since the issue happens with the same .glb file, it's not a problem with parsing.
  • I see the headers returned from the server are different.

Headers

  • Github returns access-control-allow-origin: *
  • My local http-server returns access-control-allow-origin: *
  • nhosts returns no specific CORS headers

I searched the codebase for CORS and found something, but they don't show up locally.

Is it set by a flag?
Is it disabled locally?
Is it disabled in dev mode?

Should I read more about CORS 😭?

Thanks

dbarrosop commented

Are you setting the Origin header?

curl -v -o /dev/null http://localhost:8000/v1/storage/files/55af1e60-0f28-454e-885e-ea6aab2bb288 \
      -H "Origin: https://www.example.com" \
      -H "$AUTH"
> GET /v1/storage/files/55af1e60-0f28-454e-885e-ea6aab2bb288 HTTP/1.1
> Host: localhost:8000
> User-Agent: curl/7.79.1
> Accept: */*
> Origin: https://www.example.com
> Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE2NTIzNDMyNjgsImh0dHBzOi8vaGFzdXJhLmlvL2p3dC9jbGFpbXMiOnsieC1oYXN1cmEtYWxsb3dlZC1yb2xlcyI6WyJhZG1pbiJdLCJ4LWhhc3VyYS1kZWZhdWx0LXJvbGUiOiJhZG1pbiIsIngtaGFzdXJhLXVzZXItaWQiOiJhYjViYTU4ZS05MzJhLTQwZGMtODdlOC03MzM5OTg3OTRlYzIiLCJ4LWhhc3VyYS11c2VyLWlzQW5vbnltb3VzIjoiZmFsc2UifSwiaWF0IjoxNjUyMzQyMzY4LCJpc3MiOiJoYXN1cmEtYXV0aCIsInN1YiI6ImFiNWJhNThlLTkzMmEtNDBkYy04N2U4LTczMzk5ODc5NGVjMiJ9.T4fPzD8dInw4TvsaiLu2dDsdp1PpeC-BwLjFjuaw3kc
>
* Mark bundle as not supporting multiuse
< HTTP/1.1 200 OK
< Access-Control-Allow-Origin: *
< Access-Control-Expose-Headers: Content-Length,Content-Type,Cache-Control,Etag,Last-Modified,X-Error
< Cache-Control: max-age=3600
< Content-Disposition: inline; filename="logo.jpg"
< Content-Length: 33399
< Content-Type: image/jpeg
< Etag: "78b676e65ebc31f0bb1f2f0d05098572"
< Last-Modified: Thu, 12 May 2022 07:59:30 +0000
< Surrogate-Key: 55af1e60-0f28-454e-885e-ea6aab2bb288
< Date: Thu, 12 May 2022 07:59:31 GMT

I suspect you may be missing it, as you can see from my example above Access Control headers are returned correctly (but only if Origin header is present in the request).

You can read more about it here: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

mmmoli commented

I see that too!

Works as expected locally. Thanks buddy 🙏

Honestly, I've loved getting up and running with nhost. Everything just works! When something doesn't, it's usually some simple config change. You're smart folks.