Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CORS issue with GraphQL endpoint #87

Closed
Nikodermus opened this issue Aug 1, 2020 · 3 comments
Closed

CORS issue with GraphQL endpoint #87

Nikodermus opened this issue Aug 1, 2020 · 3 comments

Comments

@Nikodermus
Copy link

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
Copy link
Owner

afuh commented Aug 22, 2020

Hey,

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

@afuh afuh closed this as completed Sep 3, 2020
@ghost
Copy link

ghost commented Mar 21, 2021

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)

@stoffie
Copy link

stoffie commented May 30, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants