我有一个在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 上显示的方式相同。