Почему Chrome не отображает POST-запрос на вкладке сети инструментов разработчика после предварительного запроса? - PullRequest
Новая
       90

Почему Chrome не отображает POST-запрос на вкладке сети инструментов разработчика после предварительного запроса?

0 голосов
/ 02 февраля 2019

У меня React Apollo Client, работающий на http://localhost:7777, и сервер Graphql-Yoga, работающий на http://localhost:4444

Когда я выполняю мутации с помощью response-apollo, они работают так, как задумано, на бэкэнде.

когда я выполняю мутацию через Firefox, (Chrome DevTools регистрирует запрос на предварительную проверку + пост-запрос).

Хотя, когда я выполняю мутацию на Chrome, регистрируется только запрос на предварительную проверкуDevTools.

Мутации происходят так, как задумано, в обоих случаях, мне интересно, почему Google Chrome не показывает POST-запрос на вкладке своей сети.

Иллюстративное изображение:

error

URL-адрес изображения: http://i.imgur.com/E8DQnIB.png

Я уже пытался использовать промежуточное ПО Express Cors, но оно действительно зависало на сервере.

createServer.js 

// Graphql Yoga Instantiation function

const { GraphQLServer } = require("graphql-yoga");

const Mutation = require("./resolvers/Mutation");
const Query = require("./resolvers/Query");
const db = require("./db");

function createServer() {
  return new GraphQLServer({
    typeDefs: "./src/schema.graphql",
    resolvers: {
      Mutation,
      Query
    },
    resolverValitaionOptions: {
      requireResolversForResolveType: false
    },
    context: req => ({ ...req, db })
  });
}

module.exports = createServer;

index.js

Файл, который запускает сервер при запуске npm run dev

// Server initialization file index.js

const cookieParser = require("cookie-parser");
require("dotenv").config({ path: "variables.env" });

const createServer = require("./createServer");
const db = require("./db");
const jwt = require("jsonwebtoken");

const server = createServer();



//Use express to handle cookies (JWT)
server.express.use(cookieParser());
//Use express to populate current user
server.express.use((req, res, next) => {
  const {
    cookies: { token }
  } = req;

  if (token) {
    const { userId } = jwt.verify(token, process.env.APP_SECRET);
    req.userId = userId;
  }

  next();
});

// Populate each request with the user
server.express.use(async (req, res, next) => {
  const { userId } = req;
  const { query } = db;
  if (!userId) return next();

  const user = await query.user(
    { where: { id: userId } },
    "{id, permissions, email, name}"
  );

  req.user = user;

  return next();
});

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

Я ожидаю увидеть в сети Chrome DevToolsПерейдите в журнал записей запросов так же, как в Firefox.

1 Ответ

0 голосов
/ 02 февраля 2019

Кажется, это была локальная проблема.

Я только что изменил 

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

на: 


const options = {{
  port: 4444,
  cors: {
    credentials: true,
    origin: process.env.FRONTEND_URL
  },
  deets: deets => {
    console.log(`Server is now running on localhost:${deets.port}`);
  }
}};

server.start(options);

И он отлично работал в обоих случаях.

Затем я изменил его обратно, и он все еще работает. 

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

ВАЖНО:. Я несколько раз перезагружал сервер graphql, и он не работал какэто работало при извлечении опций в const.Может ли это быть какой-то проблемой кеширования?

...