graphql-playground: GraphQL Playground Server Cannot Be Reached Running Locally

I am getting same issue

@joanprimpratrec2 thank you! almost same for me

for newcomers -> check your server.start() method and add playground into that.

in my case process.env.PLAYGROUND_URL === "http://localhost:3000"

server.start(
  {
    cors: { credentials: true, origin: [process.env.FRONTEND_URL, process.env.BACKED_URL, process.env.PLAYGROUND_URL] },
  }, ....
);

I was having a similar error when using graphQL playground after following the howtographql tutorial. In the end it was trivial. If I used localhost:4000 in my browser I got Server cannot be reached in the playground, the playground was also giving me strange errors when I tried using an Authorization headers, "error": "Unexpected token < in JSON at position 0" or another one was, Failed to execute 'fetch' on 'Window': Value is not a valid ByteString I say its trivial because when I tried using the localhost ip in the browser 127.0.0.1:4000 it worked without a hitch.

Just to keep a note for future self and others

When NODE_ENV is set to production, the boolean value of playground and introspection will be set to false.

Please make sure these values are set to true explicitly.

Using 127.0.0.1 worked for me, but still an issue with localhost.

Closing this, as it is a very obtuse support issue and seems to be causing confusion. These issues might be caused by:

• not handling CORS preflight requests in the server properly, which are required for cross origin POST
• your server not starting or failing to handle graphql requests
• incorrect server url
• an issue with the oss server library or framework‘s implementation of playground

We will be introducing a schema validation feature which will make a very small dent in these cases, and which will surface error payloads from your server finally!

if you have other support issues you can join our discord! https://discord.gg/HWRgmEF8Q5

I added a gists that may help you MANOJ AP GitHub https://github.com/manojap

On Mon, Jul 26, 2021 at 6:11 PM Hudson Luiz Sales Schumaker < @.***> wrote:

tried cors but no effect

I just gave up and started to postman and is working

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/graphql/graphql-playground/issues/877#issuecomment-886667831, or unsubscribe https://github.com/notifications/unsubscribe-auth/AG3OEANWHQGGC4HOGOMKVQDTZVJYNANCNFSM4GANJDTA .

This has been open since 2018, wow. Anyhow, this might work to anyone with a similar issue…

I’m assuming a lot here, but based on your first screenshot, at the bottom you have an authentication token, which probably was created dynamically (based on a login, perhaps), so the server is trying to sign in with an old token, if it so… well, there is the problem, just remove it, go fetch a fresh one, then type it back. Now you should be online and able to query. Had a similar problem today.

Just to keep a note for future self and others

When NODE_ENV is set to production, the boolean value of playground and introspection will be set to false.

Please make sure these values are set to true explicitly.

This solution will work for those who use Apollo Server V3

I was running into this same problem, and using Apollo server where on production I would get the error.

Followed the advice on https://github.com/graphql/graphql-playground/issues/876 and set introspection:true and it worked great. (its defaulted to False when NODE_ENV is production for Apollo Server)

Ok, in my case, I just read the chrome developer console and it was an error with CORS, I had in .env the front end url running on a different port than the actual port.

For me I had some problems with my mutations declaration, I recommend you to try to run your graphql on some other platform like insomnia to find the problem.

@manojap that seems to be related to the apollo graphql playground which is a fork of this repository, we do not support the apollo fork sorry!

It’s failing for my situation accessing localhost because the Host header I set in HTTP Headers is being overwritten when the HTTP request is made.

Other headers I set are getting though, but at least the Host header is being overridden, the server receives Host: localhost:8080 rather than Host: www.example.com.

Using 1.8.10 IDE.