Skip to content

CORS blocks mutation in GraphQL Yoga

I am working here with a graphql prisma backend and a graphql yoga express server on top of that. In the frontend, I am trying to call a signout mutation but its blocked by the CORS policy. Though I have added cors settings in my graphql yoga server, I keep getting this error. GraphQL Queries are working fine but Mutations are being blocked. My frontend URL is ‘http://localhost:7777‘ and yoga server is running at ‘http://localhost:4444/‘. The Error was:

Access to fetch at 'http://localhost:4444/' from origin 'http://localhost:7777' 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.
[Network error]: TypeError: Failed to fetch

GraphQL Yoga Server Cors Config:

    cors: {
        credentials: true,
        origin: [process.env.FRONTEND_URL],
deets => {
        `Server is now running on port http://localhost:${deets.port}`


// import React, { Component } from 'react';
import { Mutation } from 'react-apollo';
import styled from 'styled-components';
import gql from 'graphql-tag';
import { CURRENT_USER_QUERY } from './User';
import { log } from 'util';
const SIGN_OUT_MUTATION = gql`
    signout {
const SignOutBtn = styled.button`
color: ${props => props.theme.textMedium};
padding: 10px;
margin-right: 20px;
text-align: center;
font-family: garamond-light;
border: 1px solid ${props => props.theme.textMedium};
border-radius: 5px;
transition: background-color 0.5s ease;
transition: color 0.5s ease;
:hover {
    background: ${props => props.theme.textMedium};
    color: ${props => props.theme.white};
const Signout = props => (
    refetchQueries={[{ query: CURRENT_USER_QUERY }]}
    {signout => (
            onClick={() => {
                console.log("comes here")
            Sign Out
export default Signout;

Please tell me what I am doing wrong here. Thanks in Advance.


The solution to the problem was to write a middleware that sets appropriate response headers so that the fetch doesn’t fail., res, next) {
  res.header('Access-Control-Allow-Origin', 'http://localhost:7777');
    'Origin, X-Requested-With, Content-Type, Accept'

The above is the yoga express server middleware used to solve the problem.