0

I am unable to connect to my Apollo (graphql) server through Apollo Studio (https://studio.apollographql.com/sandbox/explorer) OR Apollo Client library on frontend. But the server is working fine when a request is sent through Postman, graphql-request library OR a CURL request.

Details of Deployment:

The server is deployed on GCP instance groups which include 4 instances in two different regions. I have used Nginx as reverse proxy to redirect traffic to localhost:4000 of each instance (the app is running on port 4000 of each machine). The instance groups are attached to the GCP HTTPS load balancer. The backends are in the healthy state in the load balancer.

Apollo studio - not working

Postman - working

NTF
  • 1

1 Answers1

0

If it's working in postman but not in studio, it's generally either an issue with CORS, some other header issue, or something similar to that.

Studio is running in a browser, so things will be a big more finicky. It will send headers that browsers always send, like the origin it's running on, and those that Apollo decides are best, like certain accept / content-type headers that your load balancer might not be allowing through.

Things like Postman and cURL generally come with less "baggage". They only send the headers and content you ask them to.

The best thing to check next is what your browser thinks is going wrong, since servers won't "lie" about the problem unless you specifically tell it to (e.g. for security reasons, some information is sometimes best left out). Open up your browser debugger on the Studio website when you try to make a request and check your Network panel. The HTTP call will fail in a certain way if it's one of these issues, and it should be pretty straight-forward with you that it was rejected because of X.

Dan Crews
  • 3,067
  • 17
  • 20
  • Thanks @Dan, the problem appeared to be related to CORS. I removed this URL 'https://studio.apollographql.com/' from the CORS in the app code and now I'm able to run the apollo studio in the browser. However, the problem still exists when trying to reach the server through Apollo Client library which I'm using in the web application. I have tried adding and removing its URL from the CORS but am still unable to solve the problem. [Error link](https://drive.google.com/file/d/11Oj2D8yrwtzbdLJNHw2We-QaD06I_WTP/view?usp=sharing) – NTF Feb 03 '23 at 12:41
  • According to that error, you need Access-Control-Allow-Headers option in your cors check. This is a rule that ensures that cross-domain requests are only allowed to send certain headers. You appear to be sending Authorization (access token, probably?) header, which is currently not allowed. – Dan Crews Feb 09 '23 at 17:24
  • Yes, we are sending the Authorization key in the header, which Apollo wasn't allowing it. We then tried sending the Access-Control-Allow-Headers from the app but unfortunately, it isn't working. We tried sending that header in many ways, but none worked for Apollo. – NTF Feb 13 '23 at 11:39
  • "We then tried sending the Access-Control-Allow-Headers from the app" just to clarify, you're using this as a `cors` option on the server, and it's still throwing the same error? – Dan Crews Feb 13 '23 at 21:24
  • Yes, we were sending this as a `CORS` option. Here's how we were sending it ```const server = new ApolloServer({ typeDefs, resolvers, directiveResolvers, middlewares: [permissions], cors: { origin: ["*", "mysite.com",], allowedHeaders: { 'Access-Control-Allow-Headers': ['Authorization'] } }, ... })``` We were then getting Preflight response error that the Authorization in the headers in not allowed even after doing it. – NTF Feb 14 '23 at 13:38
  • Is it still the same `Access-Control-Allow-Headers` error or is it now `Access-Control-Allow-Credentials`? – Dan Crews Feb 14 '23 at 21:09
  • Yes @dan-crews, it was still the same `Access-Control-Allow-Headers` error. The error was _Request header field **Authorization** is not allowed by Access-Control-Allow-Headers in a preflight response_. – NTF Feb 17 '23 at 07:33
  • In that case your configuration isn't working. `new ApolloServer({ typeDefs, resolvers, directiveResolvers, middlewares: [permissions], cors: { origin: ["*", "mysite.com",], allowedHeaders: { 'Access-Control-Allow-Headers': ['Authorization'] }}, ... })` If I'm reading this right, you're not setting cors correctly. `allowedHeaders` should be an array of strings, but you're passing in an object. Try this `cors: { origin: ["*", "mysite.com",], allowedHeaders: ['Authorization']}` – Dan Crews Feb 17 '23 at 17:58