node.js - 为什么在预检请求后 Chrome 不在开发工具网络选项卡上显示 POST 请求?
问题描述
我有一个在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 中间件,但它确实挂起了服务器。
创建服务器.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 上显示的方式相同。
解决方案
好像是本地问题。
我刚变
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 时无法正常工作。这可能是某种缓存问题吗?
推荐阅读
- flutter - Flutter 空安全迁移
- jsf - JSF 问题。XML 文件似乎没有任何与之关联的样式信息
- php - 使用带有 livewire 的特征
- javascript - 在 useEffect 依赖数组中使用 Redux 状态时如何避免无限循环?
- php - 关系访问器在 Laravel 中不起作用
- python - 为什么 fit_transform() 不适用于测试集?
- java - MIME 类型的验证
- java - 在 JMS 中设置 IBM MQ 定制属性不起作用
- r - 如何将向量添加到 R 中的向量列表中?
- flutter - 如何在颤振中从 code_field 包向 InputCodeField 添加处理程序?