CORS issue with client-side graphql

cloud

#1

I’m currently implementing a Vuejs front-end and using apollo-graphql to try and access the information from our Realm. I’m able to authenticate because when the browser does an OPTIONS request on /auth it returns back the necessary headers to allow CORS and my POST request for authentication and authorization come back just fine. However, when I do a request for a query I’m getting the following from Chrome:

Failed to load https://my cloud instance/graphql/userInfo: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:8080’ is therefore not allowed access. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

The interesting thing here is that on the OPTIONS request that Chrome does ahead of time there’s no CORS headers being returned back that it typically looks for.
Here’s the OPTIONS request for /auth

Access-Control-Allow-Origin:
*
Connection: keep-alive
Content-Encoding: gzip
Content-Type: application/json; charset=utf-8
Date: Wed, 13 Jun 2018 23:29:26 GMT
ETag: W/"327-om+nA0vSuQiURcLpm4xCgPgl/z0"
Server: nginx/1.13.5
Transfer-Encoding: chunked

Here is the OPTIONS request for /graphql/userInfo

Allow: GET,HEAD,POST
Connection: keep-alive
Content-Length: 13
Content-Type: text/html; charset=utf-8
Date: Wed, 13 Jun 2018 23:29:28 GMT
ETag: W/"d-bMedpZYGrVt1nR4x+qdNZ2GqyRo"
Server: nginx/1.13.5

Would you happen to have any insight into this?


#2

This is an oversight that we’ll correct shortly. If you PM me the name of your instance, I can deploy a new version with proper CORS configuration.


#3

Unfortunately the forum will not allow me to PM you…

Sorry, you cannot send a personal message to that user.

Edit:
One of my colleagues has posted the instance below


#4

https://breakwalltest.us1.cloud.realm.io


#5

I’ve upgraded you to the latest version of the GraphQL service - let me know if that fixes your issue.


#6

Just tested it out and it appears to be working now!

Preflight response:
Access-Control-Allow-Headers: authorization,content-type
Access-Control-Allow-Methods: GET,HEAD,PUT,PATCH,POST,DELETE
Access-Control-Allow-Origin: *
Connection: keep-alive
Content-Length: 0
Date: Thu, 14 Jun 2018 13:02:27 GMT
Server: nginx/1.13.5
Vary: Access-Control-Request-Headers


#7

@nirinchev Our instance is now stuck at “Your instance is getting ready”.

What happened to it?


#8

Sorry about that - we identified an issue with the GraphQL explorer (the one you have on /graphql/explore/%realm-path%) and I wanted to deploy a new version that fixes it. It should be all good now.


#9

Thanks for resolving that @nirinchev.


#10

@nirinchev
It looks like we’re running into this problem again on one of our instances:
parker-indego.us1.cloud.realm.io
any ideas?


#11

Not really :confused: It’s surprising considering all instances have by now been upgraded - did that work previously for that instance and can you think of anything weird that has happened to make it not work anymore?


#12

Everything was working correctly at some point in the past (it had been a week or so since I checked). I made some changes to my realm schema such that it was easier to just delete the realm and recreate it…so I deleted the realm, recreated it, and immediately started having issues.


#13

What issues are you having? This thread was covering CORS issues - are you having those or different ones? For future reference, we don’t support recreating Realms well - another user reported it here: GraphQL not working with NodeJS created Realm?.


#14

Looks like I’m getting a series of three errors:

POST https://parker-indego.us1.cloud.realm.io/graphql/%2Findego_test 502 (Bad Gateway)

Access to fetch at ‘https://parker-indego.us1.cloud.realm.io/graphql/%2Findego_test’ from origin ‘https://indego.breakwall.io’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

Uncaught (in promise) Error: Network error: Failed to fetch
at new t (ApolloError.js:43)
at QueryManager.js:327
at QueryManager.js:762
at Array.forEach ()
at QueryManager.js:761
at Map.forEach ()
at e.broadcastQueries (QueryManager.js:754)
at QueryManager.js:254
t @ ApolloError.js:43
(anonymous) @ QueryManager.js:327
(anonymous) @ QueryManager.js:762
(anonymous) @ QueryManager.js:761
e.broadcastQueries @ QueryManager.js:754
(anonymous) @ QueryManager.js:254


#15

@nirinchev
This is really interesting…the above issue “resolved itself” a day or two after I posed above and worked for a number of days. I again had to make some changes to the schema and deleted then recreated the realm (same name, same permissions)…now I’m having the same issue again.

TL;DR
It seems like this is directly caused by deleting then recreating a realm. It may “fix itself” after a day or two…

Any thoughts?


#16

It seems like an incredibly surprising manifestation of some bug - I would try to reproduce it. In the meantime though, for reasons unrelated to that, deleting and recreating Realms is not well supported by the GraphQL service. Since it caches Realms to avoid opening and closing them for every request, it means that the old data will be served until the Realm is evicted from the cache and we realize it has been deleted. We’re working on implementing better cache invalidation that will resolve this, but in the meantime, my advice would be to avoid deleting and recreating Realms, or if you have to do it, wait 5 minutes before recreating it.


#17

Just to be clear, I’ve been deleting the Realms through Realm Studio (not the GraphQL API)…I’ll let you know if/when it resolves


#18

Hi @nirinchev,
Unfortunately, this still hasn’t resolved for us. We have verified that this is easily repeatable using the following instructions:

  1. Create a Realm in Realm Studio (lets say cors_test)
  2. Add permissions for that Realm (public will do, added via __admin Realm in Realm Studio)
  3. Upgrade the realm to a Reference Realm in Realm Studio
  4. Create a dummy class in the Realm via Realm Studio (ours was TestClass with one field called uuid)
  5. Create an instance of TestClass in the Realm via Realm Studio
  6. Access the Realm via GraphQL (Apollo client query)…this will be successful
  7. Close web page that has the GraphQL script
  8. Delete Realm via Realm Studio
  9. Wait 5 minutes (per your request)
  10. Create a Realm in Realm Studio (same name as above cors_test)
  11. Add permissions for that Realm (same permissions as before)
  12. Upgrade the realm to a Reference Realm in Realm Studio
  13. Create a dummy class in the Realm via Realm Studio (ours was TestClass with one field called uuid)
  14. Create an instance of TestClass in the Realm via Realm Studio
  15. Access via GraphQL query (this will be not be successful…same errors as detailed in the thread above)

#19

Thanks for the detailed repro instructions. I will try to follow them and verify I can observe the error, after which I imagine it will be an easy fix.