How to solve Apollo Studio Sanbox Cors?

Question

I can't use apollo Studio. After migration for Graphql playground. When I try to run in localhost and redirect me to apollo studio sanbox https://studio.apollographql.com/sandbox?endpoint=http%3A%2F%2Flocalhost%3A5018%2Fgraphql: Unable to connect to localhost.

Please help to solve this

Tish

which apollo server version are you using? – Strident

Answer 1

Add CORS configuration options for the server's CORS behavior.

const server = new ApolloServer({
  cors: {
    "origin": "https://studio.apollographql.com",
    "credentials": true
  }, 
  typeDefs, 
  resolvers, 
});

Biffin

This doesn't work (at least using typescript) – Cassirer

'cors' is not a property of the config for ApolloServer – Cassirer

Have you found a solution to this problem in TypeScript dialto? – Natalyanataniel

Answer 2

Update

I was able to solve my problem. I had added the helmet middleware to Express and just needed to update the contentSecurityPolicy setting.

export default async (app: express.Application) => {
  app.use(config.graphqlPath, express.json());
  app.use(cors());
  app.use(
    helmet({
      contentSecurityPolicy:
        process.env.NODE_ENV === 'production' ? undefined : false
    })
  );
};

Not sure if that helps since there were not a lot of details on the environment in the original post, but maybe this can help someone else in the future.

Original Post

I'm having the same issue only with Apollo Sandbox. I just get a page stating that I appear to be offline. I checked the console and there are a number of CORS errors.

I also attempted to switch to the GraphQL Playground as a plugin. It displayed the initial loading screen, but never progressed past that point. I checked the console and also saw similar CORS errors.

I'm using apollo-server-express. I've created Apollo servers in the past and have never run into this while trying to run tools locally.

Carlita

Answer 3

Apollo now supports an embedded version of the Apollo Sandbox & Apollo Explorer that you can host on your Apollo Server endpoint urls. This will remove the need to whitelist the Apollo Studio endpoint in your CORS configuration to use our Explorer. You can use the Explorer right on your server endpoint.

For local development endpoints, pass embed: true to the ApolloServerPluginLandingPageLocalDefault plugin in your Apollo Server config. See more details here.

For production endpoints, pass a graphRef and embed: true to the ApolloServerPluginLandingPageProductionDefault plugin in your Apollo Server config. See more details here.

Ephesian