Cross-origin resource sharing (CORS) restricts changes in GraphQL Yoga

Question

Cross-origin resource sharing (CORS) restricts changes in GraphQL Yoga

I'm currently working on a project that involves a backend using graphql prisma and a frontend with a graphql yoga express server. I've encountered an issue where I am unable to call a signout mutation due to the CORS policy blocking it. Despite adding cors settings to my graphql yoga server, the error persists. While GraphQL Queries work seamlessly, Mutations are restricted. The URL for my frontend is 'http://localhost:7777' and the yoga server is accessible at 'http://localhost:4444/'. Here's the specific error message:

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

Cors Configuration in GraphQL Yoga Server:

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;

I would appreciate any insights on what could be causing this issue. Thank you!

javascript express graphql react-apollo prisma-graphql

Answer 1

Answer №1

To overcome the issue, a middleware was implemented to configure the response headers appropriately, preventing the fetch operation from failing.

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 snippet above showcases the yoga express server middleware that successfully tackled the problem at hand.

Answer 2

To overcome the issue, a middleware was implemented to configure the response headers appropriately, preventing the fetch operation from failing.

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 snippet above showcases the yoga express server middleware that successfully tackled the problem at hand.

Answer 3

Answer №2

To successfully complete the task, I needed to pass an array of string values to the origin and also update the new origin value 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}`);
  }
);

Answer 4

To successfully complete the task, I needed to pass an array of string values to the origin and also update the new origin value 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}`);
  }
);

Answer 5

Answer №3

After encountering the same issue, I managed to resolve it by implementing the following solution:

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

Answer 6

After encountering the same issue, I managed to resolve it by implementing the following solution:

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

Answer 7

Answer №4

In my situation, implementing this middleware made a significant difference:

server.express.use((req, res, next) => {
  res.header('Access-Control-Allow-Credentials', true)
  next()
})

Answer 8

In my situation, implementing this middleware made a significant difference:

server.express.use((req, res, next) => {
  res.header('Access-Control-Allow-Credentials', true)
  next()
})

Answer 9

Answer №5

To prevent browser complaints, the Server Application needs to include

Access-Control-Allow-Origin: YOUR_DOMAIN

in the response header.

An easy way to achieve this is by using middleware.

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "YOUR-DOMAIN"); // Make sure to replace 'YOUR-DOMAIN' with your actual domain
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

Alternatively,

const cors = require('cors')
const corsOptions = {
    origin: [
        "http://YOUR-DOMAIN"
    ],
    credentials: true
}
app.use(cors(corsOptions))

If you have already followed these steps and are still facing issues,

the problem might be due to a corrupted response.

It's possible that your server encountered an exception while sending the response or restarted before the response was fully delivered to the client. Another potential cause could be issues with your ISP or VPN blocking certain requests. :)

Answer 10

To prevent browser complaints, the Server Application needs to include

Access-Control-Allow-Origin: YOUR_DOMAIN

in the response header.

An easy way to achieve this is by using middleware.

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "YOUR-DOMAIN"); // Make sure to replace 'YOUR-DOMAIN' with your actual domain
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

Alternatively,

const cors = require('cors')
const corsOptions = {
    origin: [
        "http://YOUR-DOMAIN"
    ],
    credentials: true
}
app.use(cors(corsOptions))

If you have already followed these steps and are still facing issues,

the problem might be due to a corrupted response.

It's possible that your server encountered an exception while sending the response or restarted before the response was fully delivered to the client. Another potential cause could be issues with your ISP or VPN blocking certain requests. :)

Cross-origin resource sharing (CORS) restricts changes in GraphQL Yoga

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Printing keys of objects in an array in AngularJS through iteration

Tips for customizing the background color of hyperlinks

Leveraging $scope methods from a separate controller within AngularJS

In the realm of React Native, an error arises when attempting to access 'this._nativeModule.isBluetoothEnabled', as the reference to null prevents it from

Achieve full implementation of ng-repeat within an angular directive

Tips for automatically verifying coupons and adjusting prices

The challenges of implementing view changes with $state.go

Error encountered: TypeScript/Knex - The import statement can only be used inside a module

Efficiently clear input field values by clicking the remove button

What is the best way to trigger a parent function from a Bootstrap modal within a Vue.js component

Top method for identifying genuine users and preventing bots

When updating a table in MySQL, use foreign key constraints to automatically populate another table with corresponding data

The horizontal scrolling feature in tables is not functioning properly on iOS Safari

Is there a way to implement a polyfill for DOMParser on Web Worker in order to utilize it for uploads with the AWS S

How can you assign a value to an HTML Input by dragging an SVG shape or canvas?

Is there a way to utilize a POST request to pass a React component from server.js to App.js for rendering?

Firefox fails to identify the text inputted into the textbox

Learning how to retrieve information from Firebase Realtime Database using Vue.js

JavaScript: Issue with hiding input BUTTON element - still not resolved

The functionality of GET_POST is not functioning properly