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).
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