gpt4 book ai didi

node.js - 为什么 Chrome 在预检请求后不在开发工具网络选项卡上显示 POST 请求?

转载 作者:太空宇宙 更新时间:2023-11-04 01:36:14 26 4
gpt4 key购买 nike

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

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

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

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

在这两种情况下,突变都按预期发生,我想知道为什么 google chrome 不在其网络选项卡上显示 POST 请求。

说明性图片:

error

图片网址: /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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com