afuh/rick-and-morty-api

CORS issue with GraphQL endpoint

Closed this issue · 3 comments

hey @afuh , I'm trying to use the graphql endpoint but I'm getting rejected by CORS.

I tried with both ApolloLink and plain fetch:

Apollo

import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { HttpLink } from 'apollo-link-http';
import gql from 'graphql-tag';

const cache = new InMemoryCache();
const link = new HttpLink({
    uri: 'https://rickandmortyapi.com/graphql/',
});

const client = new ApolloClient({
    cache,
    link,
});

    client.query({
        query: gql`
            query {
                characters(page: 1) {
                    results {
                        name
                    }
                }
            }
        `,
    })

Vainilla

fetch('https://rickandmortyapi.com/graphql/', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({
        query: `
            characters(page: 1) {
                results {
                    name
                }
            }
        `,
    }),
});

Both are running in a minimal, parcel server, localhost:3000, and the response is:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://rickandmortyapi.com/graphql/. (Reason: CORS request did not succeed).
afuh commented

Hey,

I don't see any CORS problems on my end. is this still happening to you?

I have the same problem. My app is running on localhost:3000, I'm using Apollo and tried with both Chrome and Safari.

Access to fetch at 'https://rickandmortyapi.com/' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: 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.

[Error] Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin.
[Error] Fetch API cannot load https://rickandmortyapi.com/ due to access control checks.
[Error] Failed to load resource: Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin. (rickandmortyapi.com, line 0)

This happens to me using firefox 126. Works smooth on chrome 125