在预检请求之后，为什么Chrome在开发工具网络标签上不显示POST请求？

Question

我有一个运行在http://localhost:7777的React Apollo客户端 还有一个运行在http://localhost:4444

上的Graphql-Yoga服务器

当我通过react-apollo执行突变时，它们可以在后端正常工作。

当我通过Firefox执行变异时，（预检请求+发布请求）会记录在Chrome DevTools中。

但是，当我通过Chrome执行突变时，DevTools上只会记录预检请求。

在这两种情况下，突变均按预期发生，我想知道为什么Google chrome无法在其网络标签上显示POST请求。

说明性图片：

图片网址： 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上显示的一样。

Answer 1

似乎是本地问题。

我刚刚改变了

{ message: 'Missing credentials' }

至：

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

重要提示：。我之前多次重新启动过graphql服务器，但在将选项提取到const时它无法正常工作。这可能是某种缓存问题吗？