Go back

Solution 2: Disable CORS using an extension (doesn't always work)

When you first use this tool you will likely get the following error:

{
    "message": "Failed to fetch",
    "stack": "TypeError: Failed to fetch"
}

This is because this tool requires fetching data from a GraphQL API, but the endpoint does not always set the Access-Control-Allow-Origin header.

You will need to install the Allow CORS: Access-Control-Allow-Origin extension in Chrome. This bypasses the normal protection temporarily to allow this tool to make the necessary requests.
Source

In the settings of this extention you will also need to turn on the Access-Control-Allow-Headers to make the prefetch request the GraphiQL does work.
If you don't set this you will still get a CORS error
Source

Also, don't forget to actually turn it on by clicking on the extention, and then on the big C logo on the left.
Now you can finally put in a url and explore it with all the neat functions of GraphiQL