javascript - CORS blockerar mutation i GraphQL Yoga

Jag arbetar här med en GraphQL Prisma-backend och en GraphQL Yoga Express-server ovanpå den. I frontend försöker jag anropa en signout-mutation men den blockeras av CORS-policyn. Trots att jag har lagt till CORS-inställningar i min GraphQL Yoga-server får jag fortfarande detta fel. GraphQL-frågor fungerar som de ska, men mutationer blockeras. Min frontend-URL är 'http://localhost:7777' och Yoga-servern körs på 'http://localhost:4444/'. Felet var:

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-konfiguration:

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

Mutation :

// 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 => 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 => (
<Mutation
    mutation={SIGN_OUT_MUTATION}
    refetchQueries={[{ query: CURRENT_USER_QUERY }]}
>
    {signout => (
        <SignOutBtn
            onClick={() => {
                console.log("comes here")
                signout();
            }}
        >
            Sign Out
        </SignOutBtn>
    )}
</Mutation>
);
export default Signout;

Vänligen berätta för mig vad jag gör fel här. Tack på förhand.

Svar #1

Lösningen på problemet var att skriva en mellanprogramvara som ställer in lämpliga svarshuvuden så att hämtningen inte misslyckas.

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();
});

Ovanstående är yoga express-server-mellanmjukvara som används för att lösa problemet.

Svar #2

Det jag var tvungen att göra var att skicka ursprunget en array av strängvärden. Samt att sätta det nya ursprunget PAST_FRONTEND_URL i 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}`);
  }
);