CORS блокирует мутации в GraphQL Yoga

Я работаю здесь с сервером graphql prisma и сервером graphql yoga express. Во внешнем интерфейсе я пытаюсь вызвать мутацию выхода, но она заблокирована политикой CORS. Хотя я добавил настройки cors на свой сервер йоги graphql, я продолжаю получать эту ошибку. Запросы GraphQL работают нормально, но мутации блокируются. Мой URL-адрес внешнего интерфейса - «http: // локальный: 7777», а сервер йоги работает по адресу «http: // локальный: 4444 /». Ошибка была:

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

server.start(
{
    cors: {
        credentials: true,
        origin: [process.env.FRONTEND_URL],
    },
},
deets => {
    console.info(
        `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`
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.info("comes here")
                signout();
            }}
        >
            Sign Out
        </SignOutBtn>
    )}
</Mutation>
);
export default Signout;

Скажите, пожалуйста, что я здесь делаю не так. Заранее спасибо.

Я не вижу, что не так с кодом, которым вы поделились. Не могли бы вы предоставить нам минимально воспроизводимый репозиторий, чтобы мы могли исследовать больше?

Errorname 16.12.2018 19:43

@Errorname Спасибо за попытку помочь, и вы можете найти репо здесь. В репо не будет файлов среды. Если они вам нужны, дайте мне знать.

arvind 17.12.2018 09:07

Спасибо за ссылку, но файлов слишком много для анализа. Не могли бы вы создать репозиторий только с файлами, необходимыми для воспроизведения проблемы?

Errorname 17.12.2018 11:00
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
6
3
2 549
5
Перейти к ответу Данный вопрос помечен как решенный

Ответы 5

Ответ принят как подходящий

Решением проблемы было написание промежуточного программного обеспечения, которое устанавливает соответствующие заголовки ответов, чтобы выборка не завершалась ошибкой.

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

Вышеупомянутое промежуточное программное обеспечение сервера йоги используется для решения проблемы.

Вы держали cors: {credentials: true,origin: process.env.FRONTEND_URL,}, на сервере?

Chance Smith 31.01.2019 20:01

@ChanceSmith Да, я пробовал это, но у меня это не сработало. Я также разместил ту же конфигурацию в вопросе. Сообщите мне, если я сделал что-то не так.

arvind 31.01.2019 20:15

Извините, у меня та же проблема, но теперь интересно, оставили ли вы этот объект или нет. ?‍♂️

Chance Smith 01.02.2019 23:12

Что мне нужно было сделать, так это передать источнику массив строковых значений. А также установить новое происхождение PAST_FRONTEND_URL в heroku

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

У меня была такая же проблема, и она была решена с помощью этого

server.start(
  {
    cors: {
      credentials: true,
      origin: [process.env.FRONTEND_URL],
      methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
      preflightContinue: false,
      optionsSuccessStatus: 204
    }
  },
  server => {
    console.info(`Server is running on http://localhost/${server.port}`);
  }
);

Добавление этого промежуточного программного обеспечения помогло в моем случае:

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

Серверное приложение должно добавить Access-Control-Allow-Origin: YOUR_DOMAIN в заголовок ответа, и браузер не будет жаловаться на это.

Для этого можно использовать промежуточное ПО.

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "YOUR-DOMAIN"); // update to match the domain you will make the request from
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

ИЛИ

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

Но ждать !! Я уже сделал эти шаги, но проблема все еще существует; (

если после этих шагов проблема все еще существует.

тогда это из-за искаженный ответ.

возможно, ваш сервер выбросить исключение при отправке ответа или, возможно, начать сначала и ответ не отправлен клиенту полностью. или, может быть, проблема с вашим интернет-провайдером или VPN, которые блокируют некоторые запросы. :)

Другие вопросы по теме