CORS blocks mutation in GraphQL Yoga
The solution to the problem was to write a middleware that sets appropriate response headers so that the fetch doesn't fail.
server.express.use(function(req, res, next) { res.header('Access-Control-Allow-Origin', 'http://localhost:7777'); res.header( 'Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept' ); next();});The above is the yoga express server middleware used to solve the problem.
What I had to do was pass the origin an array of string values. As well as set the new origin PAST_FRONTEND_URL in heroku
server.start( { cors: { credentials: true, origin: [process.env.FRONTEND_URL, process.env.PAST_FRONTEND_URL], }, }, deets => { console.log(`Server is now running on port http://localhost:${deets.port}`); });
I had the same problem and it was solved with this
server.start( { cors: { credentials: true, origin: [process.env.FRONTEND_URL], methods: 'GET,HEAD,PUT,PATCH,POST,DELETE', preflightContinue: false, optionsSuccessStatus: 204 } }, server => { console.log(`Server is running on http://localhost/${server.port}`); });