为啥在预检请求后 Chrome 不在开发工具网络选项卡上显示 POST 请求？

Posted 2023-03-08

【中文标题】为啥在预检请求后 Chrome 不在开发工具网络选项卡上显示 POST 请求？

【英文标题】：Why Chrome doesn't display POST request at dev tools network tab after preflight request?为什么在预检请求后 Chrome 不在开发工具网络选项卡上显示 POST 请求？

【发布时间】：2019-06-26 17:18:58

【问题描述】：

我有一个在 http://localhost:7777 运行的 React Apollo 客户端 还有一个运行在http://localhost:4444 的 Graphql-Yoga 服务器

当我通过 react-apollo 执行突变时，它们在后端按预期工作。

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

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

在这两种情况下，突变都按预期发生，我想知道为什么谷歌浏览器没有在其网络选项卡上显示 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 上显示的方式相同。

【问题讨论】：

对我来说，它显示了 Chrome Devtools 中的所有内容。我可以在您的屏幕截图中看到差异。在 Chrome 中，您位于页面的一个部分 (/items)，在开发工具中，您已标记 XHR 调用的过滤器，而在 Firefox 中，您位于页面的根目录，并且没有任何过滤器开发工具。我并没有说这有什么不同......但我会在两种浏览器中尝试相同的检查......在我的 Chrome 中，它显示了 POST 之前的预检调用

@JVLobo 感谢您的评论，我已经发布了解决问题的方法。你以前经历过这样的事情吗？

不是真的...看起来超级奇怪

【参考方案1】：

似乎是本地问题。

我刚刚换了

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 时那样工作。这可能是某种缓存问题吗？