- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试制作Express session与 Next.js 合作,并且已在客户端成功完成此操作,但我在 getInitialProps 内部进行的 API 调用时遇到了问题。
注意:我正在使用isomorphic-unfetch进行 API 调用。我的 Next.js 安装在 localhost:3000 上运行,我的 Express 服务器在 localhost:5000 上运行。
以下是客户端 API 调用的示例(在 getInitialProps 之外):
componentDidMount() {
fetch('/path/to/endpoint', {
method: 'GET',
credentials: 'include',
}).then((res) => console.log(res));
}
我在这里记录资源是因为我想查看标题。结果这个请求有一个空的 headers 对象。如果我兑现了 promise ,我就会得到我请求的数据。即使我刷新页面,此调用的 session ID 在服务器上也保持一致。这里一切都按预期进行。
以下是 getInitialProps 内部 API 调用的示例:
static async getInitialProps(ctx) {
fetch('/path/to/endpoint', {
method: 'GET',
credentials: 'include',
}).then((res) => console.log(res.headers));
}
再次记录以查看 header 。该响应有标题,它们看起来像这样:
Headers {
_headers:
{ 'x-powered-by': [ 'Express' ],
'access-control-allow-origin': [ 'http://localhost:3000' ],
vary: [ 'Origin, Accept-Encoding' ],
'access-control-allow-credentials': [ 'true' ],
'x-frame-options': [ 'SAMEORIGIN' ],
'x-xss-protection': [ '1; mode=block' ],
'set-cookie'['YgJGcZPBgbE_nEqqLZpw0ba0pyaf2eNS','connect.sid=s%3AYgJGcZPBgbE_nEqqLZpw0ba0pyaf2eNS.Oye%2F7%2BsyXrrLJwphEJ3nq3yMkBhM3%2Fm4PCl9KIV%2FTzA; Path=/; Expires=Sun, 05 Aug 2018 15:56:52 GMT; HttpOnly' ],
'content-type': [ 'application/json; charset=utf-8' ],
'content-length': [ '246' ],
etag: [ 'W/"f6-82FKQ+ERtkxLiKa8hEIeY4kgGgE"' ],
date: [ 'Sun, 22 Jul 2018 15:56:52 GMT' ],
connection: [ 'close' ] } }
正如你所看到的,我的 set-cookie header 中有 connect.sid (快速 session ID),但问题是每当我刷新页面时 connect.sid cookie 都会更改并且与客户端的 session ID 不匹配API 调用(即使刷新页面后也保持不变)。
我在 Express 服务器上的 session 对象如下所示:
app.use(
session({
resave: false,
name: 'connect.sid',
saveUninitialized: false,
secret: SESSION_SECRET,
unset: 'destroy',
cookie: {
maxAge: 3600000 * 24 * 14,
secure: false,
},
store: new MongoStore({
url: mongoUrl,
autoReconnect: true,
}),
})
);
如果有人知道如何从 getInitialProps 内部进行 API 调用并与快速 session 配合使用,我将不胜感激!预先感谢您。
最佳答案
我找到了解决方案。我必须在请求 header 中发送 session cookie,而不是使用 credentials: 'include'
。这是 getInitialProps 中的一个工作请求。
static async getInitialProps(ctx) {
const res = await fetch('path/to/endpoint', {
headers: {
cookie: ctx.req.headers.cookie,
},
});
const user = await res.json();
return { user };
}
关于express - (Next.js,Express session )在 getInitialProps 内发出的每个请求的新 session ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51466982/
我用 withAuth HOC 包装了一个页面。在同一页面中,我还尝试调用 getInitialProps。如果我登录, getInitialProps 函数不会运行(尽管它表明我的 withAuth
我完成了使用 create-react-app (CSR) 创建的 React 应用程序的编码,但我现在正在使用 Next.js 框架重写整个应用程序以获得更好的 SEO 性能。 在重写它时,我很难弄
我在此路径中有文件 ./pages/blog/[id]/[title].js这是我写的代码: import React from 'react'; import PropTypes from 'pro
由于我喜欢将 SSR 添加到我即将进行的项目中以改进 SEO,因此我想尝试下一个。我想要的是只对初始页面使用 SSR,站点中的其余导航将是客户端渲染。我看到 getInitialProps 在这种情况
这是我的 .eslintrc { "plugins": ["react"], "parserOptions": { "ecmaVersion": 6, "sourceType"
使用 NextJS 并看到一个页面示例: class IndexPage extends Component { static async getInitialProps(context) {
我是 React 和 Next.js 的新手,所以请耐心等待。但我花了三个小时进行搜索,但我终其一生都无法弄清楚我在这里做错了什么。 this.props.test 不输出任何内容,即使它看起来应该输
我有一个低阶页面组件,需要在 getInitialProps() 中获取数据。它成功获取数据,但它确实作为组件中的 prop 返回。下面是我正在处理的代码 import React, { Compon
当我的 View 加载时,我试图在 getInitialProps 中获取已解析文件的内容,问题是它告诉我 Module not found: Can't resolve 'fs ' 我不明白为什么
我正在尝试使用 getInitialProps 从 firebase 获取数据到我的 next.js 应用程序,但数据显示在 VS Code 终端中(以及一些错误)。但是,在浏览器中,我收到此消息 请
我收到此错误,已阅读文档和其他答案,但仍然不明白为什么。 我想做的是一个api调用,如果有匹配的post,我想呈现Post组件,如果没有,我想重定向或呈现错误页面。 当我点击现有的帖子链接时,我会收到
我遇到了有关从 Next.js 中的 getInitialProps 函数获取数据的问题 场景是这样的:当用户第一次访问页面时,我向远程 API 发出 HTTP 请求,该 API 返回应用程序所需的数
我有一个使用 next.js 和 Apollo/Graphql 的应用程序,我试图完全理解 getInitialProps 生命周期 Hook 的工作原理。 在我的理解中,生命周期getInitial
我正在使用 next.js 构建一个网站,并且我正在尝试解决以下“问题”。我有一些静态数据(网站文本)需要从 API 端点(Headless CMS)获取。 对于各个页面,我使用 getInitial
这是我的代码 import React from 'react' import fetch from 'isomorphic-unfetch' import Book from './Book' fu
假设我有一个名为 dashboard.js 的页面,它是一个功能组件,我将它包装在一个“HOC”中,向它注入(inject)一些 Prop 。 export default withAuthentic
我正在使用以下示例在 Next.js 中实现数据获取: https://github.com/zeit/next.js/blob/master/examples/data-fetch/pages/in
当页面第一次在服务器端渲染或刷新渲染页面时,getInitialProps 不起作用: Home.getInitialProps = async ({store}) => { axios.po
当使用 NextJS 构建静态站点时,我希望 getInitialProps 方法仅在构建步骤期间触发,而不是在客户端触发。 在构建步骤中,NextJS 运行 getInitialProps meth
我使用 Next.JS 版本 9.1.3 并在我的项目中具有动态路由(但带有 exportPathMap 的静态文件)。 路由在开发模式下工作正常,但在生产模式下不起作用。 我得到: Error oc
我是一名优秀的程序员,十分优秀!