How can one deploy Apollo Server with Create-React-App?

Question

I'm trying to deploy my application to a production environment, but having some trouble wiring it all together.

I've got a create-react-app for my frontend, which is served up by a simple express/serve server. On the backend, I've got NGINX proxying successfully to my API server, which is using Apollo to serve my data. The API is running on port 4000.

The Apollo-Server is as-follows, and works fine:

import { resolve } from "path";
import dotenv from "dotenv";
const envi = process.env.NODE_ENV;
dotenv.config({ path: resolve(__dirname, `../.${envi}.env`) });

import "reflect-metadata";
import { connect } from "./mongodb/connect";
import { buildSchema } from "type-graphql";
import { ApolloServer } from "apollo-server";
import { SenateCommitteeResolver, HouseCommitteeResolver } from "./resolvers";
import { populateDatabase } from "./util";

(async () => {
  // Connect to MongoDB
  await connect();
  console.log(`📊 Databases connected`);
  const schema = await buildSchema({
    resolvers: [HouseCommitteeResolver, SenateCommitteeResolver],
    emitSchemaFile: resolve(__dirname, "schema.gql"),
  });

  // If development, set database docs
  envi === "development" && (await populateDatabase());

  // Launch the server!
  const server = new ApolloServer({
    schema,
    playground: true,
  });

  // Server listens at URL
  const { url } = await server.listen(4000);
  console.log(`🚀 Server ready, at ${url}`);
})();

I'm trying to connect my express server to the Apollo Server, but that's where I'm running into problems. The application is supposed to connect using Apollo's Client and HTTP Link, because I'm using Apollo Client on the frontend too:

import React, { useEffect } from "react";
import { AppRouter } from "./routers";
import ReactGA from "react-ga";
import { ApolloProvider } from "@apollo/client";
import client from "./graphql/client";

import "./styles/index.scss";

function App(): React.ReactElement {    
  return (
    <ApolloProvider client={client}>
      <AppRouter />
    </ApolloProvider>
  );
}

export default App;

And here's the client file:

import { ApolloClient, InMemoryCache, createHttpLink } from "@apollo/client";

const httpLink = createHttpLink({ uri: process.env.REACT_APP_API as string });
const cache = new InMemoryCache();

const client = new ApolloClient({
  link: httpLink,
  cache,
  connectToDevTools: true,
});

export default client;

However, when the user navigates to the site and the site itself tries to make a request to my backend, I'm getting a CORS error:

Access to fetch at 'https://www.cloture.app/' from origin 'https://cloture.app' 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.

What's going wrong? How can I connect Apollo's client with my Apollo Server on the backend?

Answer 1

Adding it here, because the suggestion requires some code.

Try adding :

const server = new ApolloServer({
    schema,
    playground: true,
    cors: {
      origin: "*" // it will allow any client to access the server, but you can add specific url also
    }

  });