我有一个在 http://localhost:7777 运行的 React Apollo 客户端 以及运行在 http://localhost:4444 的 Graphql-Yoga 服务器
当我通过react-apollo执行突变时,它们在后端按预期工作。
当我通过 Firefox 执行突变时,(预检请求 + 发布请求)会记录在 Chrome DevTools 中。
但是,当我通过 Chrome 执行突变时,DevTools 上仅记录预检请求。
在这两种情况下,突变都按预期发生,我想知道为什么 google chrome 不在其网络选项卡上显示 POST 请求。
说明性图片:
图片网址: /image/8JaUx.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 上显示的那样。
最佳答案
似乎这是一个本地问题。
我刚刚改变了
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 时起作用。这可能是某种缓存问题吗?
关于node.js - 为什么 Chrome 在预检请求后不在开发工具网络选项卡上显示 POST 请求?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54491202/