Cors Problem with Node, typescript, GraphQl and Appllo

Cors Problem with Node, typescript, GraphQl and Appllo


0

I’m getting corns with my application. Have I configured my server incorrectly ? I’m trying to create a user in my PostgreeSQL database via the frontend. I’ve made a tsx component which is a form. When I submit the data, it returns a cors error, my frontend being at localhost:3000 and my backend at localhost:4000. Despite all the configuration I’ve done, it doesn’t work. However, my preflight request works, returning a code 204, but not my fetch request, which returns a cors error.

Here’s my code:

import express from 'express';
import cors from 'cors';
import { ApolloServer } from 'apollo-server-express';
import schema from '../graphql/schema';

const app = express();
const port = process.env.PORT || 4000;

const whitelist = ['https://localhost:3000'];

const corsOptions: cors.CorsOptions = {
  origin: (origin: any, callback: any) => {
    if (whitelist.indexOf(origin) !== -1 || !origin) {
      callback(null, true);
    } else {
      callback(new Error('Not allowed by CORS'));
    }
  },
  methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
  credentials: true,
  optionsSuccessStatus: 204,
};

app.options('*', cors(corsOptions));

app.use(cors());

app.get('/', (req, res) => {
  res.send('Hello, World!');
});

const server = new ApolloServer({
  schema,
  context: ({ req, res }) => ({
    req,
    res,
  })
});

const startServer = async () => {
  await server.start();
  server.applyMiddleware({
    app,
    path: '/graphql',
    cors: false,
  });

  app.listen(port, () => {
    console.log(`Server is running on port ${port}`);
  });
};

startServer();

and here, the error :

localhost/:1 Access to fetch at ‘https://localhost:4000/graphql’ from origin ‘https://localhost:3000’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: The value of the ‘Access-Control-Allow-Origin’ header in the response must not be the wildcard ‘*’ when the request’s credentials mode is ‘include’.

This is my first frontend application with a backend and this problem has been blocking me for days. The strange thing is that one request has already been successful, but the second time it wasn’t. I don’t know what else to try. Thanks in advance for your help, coding friends!

New contributor

BigZoo92 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.


Load 5 more related questions


Show fewer related questions

0



Leave a Reply

Your email address will not be published. Required fields are marked *