title: CORS blocks mutation in GraphQL Yoga
body: <p>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 '<a href="http://localhost:7777" rel="noreferrer">http://localhost:7777</a>' and yoga server is running at '<a href="http://localhost:4444/" rel="noreferrer">http://localhost:4444/</a>'. The Error was:  </p>
  
  <pre><code>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
  </code></pre>
  
  <p>GraphQL Yoga Server Cors Config:</p>
  
  <pre><code>server.start(
  {
      cors: {
          credentials: true,
          origin: [process.env.FRONTEND_URL],
      },
  },
  deets =&gt; {
      console.log(
          `Server is now running on port http://localhost:${deets.port}`
      );
  }
  );
  </code></pre>
  
  <p>Mutation:</p>
  
  <pre><code>// 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`
  mutation SIGN_OUT_MUTATION {
      signout {
          message
      }
  }
  `;
  
  const SignOutBtn = styled.button`
  color: ${props =&gt; props.theme.textMedium};
  padding: 10px;
  margin-right: 20px;
  text-align: center;
  font-family: garamond-light;
  border: 1px solid ${props =&gt; props.theme.textMedium};
  border-radius: 5px;
  transition: background-color 0.5s ease;
  transition: color 0.5s ease;
  :hover {
      background: ${props =&gt; props.theme.textMedium};
      color: ${props =&gt; props.theme.white};
  }
  `;
  
  const Signout = props =&gt; (
  &lt;Mutation
      mutation={SIGN_OUT_MUTATION}
      refetchQueries={[{ query: CURRENT_USER_QUERY }]}
  &gt;
      {signout =&gt; (
          &lt;SignOutBtn
              onClick={() =&gt; {
                  console.log("comes here")
                  signout();
              }}
          &gt;
              Sign Out
          &lt;/SignOutBtn&gt;
      )}
  &lt;/Mutation&gt;
  );
  export default Signout;
  </code></pre>
  
  <p>Please tell me what I am doing wrong here. Thanks in Advance.</p>