- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我遇到了有关从 Next.js 中的 getInitialProps
函数获取数据的问题
场景是这样的:当用户第一次访问页面时,我向远程 API 发出 HTTP 请求,该 API 返回应用程序所需的数据。我在 getInitialProps
方法中发出请求,因为我希望在将内容发送给用户时完全呈现内容。
问题是,当我发出这个请求时,API 返回一个 session cookie,我需要将其存储在浏览器中,而不是呈现内容的服务器中。此 cookie 必须出现在未来客户端对 API 的请求中。否则,API 返回 403。
我的问题是:如果我从服务器执行这个请求,并且因此响应也返回到服务器,我如何为浏览器设置 cookie 以便我可以向客户端发出请求API?
我尝试操纵 cookie 的 domain
选项,但我无法设置另一个域。浏览器会忽略它。
这是我的 getInitialProps
的样子:
static async getInitialProps(appContext) {
const { Component, ctx, router } = appContext;
const { store } = ctx;
let pageProps = {};
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(appContext);
}
const { hotelId, reservationId } = router.query;
if (!hotelId || !reservationId) return { pageProps };
// Fetching reservation and deal data
try {
const { data, errors, session } = await fetchData(hotelId, reservationId);
if (data) {
store.dispatch(storeData(data));
}
// This works, but the domain will be the frontend server, not the API that I connecting to the fetch the data
if (session) {
ctx.res.setHeader('Set-Cookie', session);
}
// This doesn't work
if (session) {
const manipulatedCookie = session + '; Domain: http://exampe-api.io'
ctx.res.setHeader('Set-Cookie', manipulatedCookie);
}
if (errors && errors.length) {
store.dispatch(fetchError(errors));
return { errors };
} else {
store.dispatch(clearErrors());
return {
...pageProps,
...data
};
}
} catch (err) {
store.dispatch(fetchError(err));
return { errors: [err] };
}
return { pageProps };
}
fetchData 函数只是一个向 API 发送请求的函数。我从响应对象中提取 cookie,然后将其分配给 session
变量。
最佳答案
getInitialProps 在客户端和服务器上执行。所以当你写你的抓取函数时,你有条件地抓取。因为如果您在服务器端发出请求,则必须输入绝对 url,但如果您在浏览器上,则使用相对路径。您必须注意的另一件事是,当您发出请求时,您必须自动附加 cookie。
在您的示例中,您正尝试从 _app.js 发出请求。 Next.js 使用 App 组件来初始化页面。因此,如果您想在页面上显示一些 secret 数据,请在该页面上进行。 _app.js 是所有其他组件的包装器,您从 _app.js 的 getInitialProps 函数返回的任何内容都将可用于应用程序中的所有其他组件。但是如果你想在授权时在组件上显示一些 secret 数据,我认为最好让那个组件来获取数据。想象一个用户登录他的帐户,您必须仅在用户登录时获取数据,因此其他不需要身份验证的端点将无法访问该 secret 数据。
假设一个用户登录了,你想获取他的 secret 数据。假设你有 page/secret 所以在那个组件里面我可以这样写:
Secret.getInitialProps = async (ctx) => {
const another = await getSecretData(ctx.req);
return { superValue: another };
};
getSecretData() 是我们应该获取 secret 数据的地方。抓取操作通常存储在/actions/index.js 目录中。现在我们到这里来编写我们的获取函数:
// Since you did not mention which libraries you used, i use `axios` and `js-cookie`. they both are very popular and have easy api.
import axios from "axios";
import Cookies from "js-cookie";
//this function is usually stored in /helpers/utils.js
// cookies are attached to req.header.cookie
// you can console.log(req.header.cookie) to see the cookies
// cookieKey is a param, we pass jwt when we execute this function
const getCookieFromReq = (req, cookieKey) => {
const cookie = req.headers.cookie
.split(";")
.find((c) => c.trim().startsWith(`${cookieKey}=`));
if (!cookie) return undefined;
return cookie.split("=")[1];
};
//anytime we make request we have to attach our jwt
//if we are on the server, that means we get a **req** object and we execute above function.
// if we do not have req, that means we are on browser, and we retrieve the cookies from browser by the help of our 'js-cookie' library.
const setAuthHeader = (req) => {
const token = req ? getCookieFromReq(req, "jwt") : Cookies.getJSON("jwt");
if (token) {
return {
headers: { authorization: `Bearer ${token}` },
};
}
return undefined;
};
//this is where we fetch our data.
//if we are on server we use absolute path and if not we use relative
export const getSecretData = async (req) => {
const url = req ? "http://localhost:3000/api/v1/secret" : "/api/v1/secret";
return await axios.get(url, setAuthHeader(req)).then((res) => res.data);
};
这就是你应该如何在 next.js 中实现获取数据
关于javascript - Next.js getInitialProps cookies,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56315965/
这个问题已经有答案了: How to modify a public field of a field of a field… As in link.next.next.next(.next*n) n
我有一个保存链接的数组。每个链接都有一个名为 next 的公共(public)字段,它可以保存另一个链接,该链接可以保存更多链接等。当我想删除东西时我可以做 array[x].next = array
文档概述了在中间件中使用“await next()”的用例,导致中间件暂停并触发下游的下一个中间件,直到所有中间件都执行完毕,此时上游级联将开始并且中间件将完整执行。如果用户想要缩短级联,那么单独写“
我今天遇到了一个用例,我试图让我的 nextjs 应用程序在 android webview 中工作,不幸的是 android 不解析以 _next 开头的路径并且我的大部分块文件都在_next/st
关闭。此题需要details or clarity 。目前不接受答案。 想要改进这个问题吗?通过 editing this post 添加详细信息并澄清问题. 已关闭 8 年前。 Improve th
next-with-apollo npm 库和 the approach shown in next.js docs 中选择的“next.js 中的 apollo-client”方法对比. next.
我尝试使用 next-auth 获取凭据身份验证,但我没有使用它的经验,无论我做什么,我都会收到以下消息:[next-auth][error][callback_credentials_jwt_err
更改语言时需要更改路线名称。例如,我有一条路线 /en/career但是当我改成捷克语时,我需要一条路线 /cs/kariera .基本上我需要本地化 URL。现在,当我在 /en/career 上时
更好/优雅的方法是什么? jQuery(this).find('title').next().next().next().eq(0).text(); //THIS WORKS 我尝试使用 jQuery
我只是对 node 感到好奇。 node.next 和 node.next。到目前为止,我们已经了解到节点有两个部分,其中存储数据和下一个节点的地址(node.next),然后是 node.next.
好的,我正在尝试单独隐藏这组信息。 这有效: $(".arrow").click(function() { $(this).next().next().slideToggle(); }); Mo
我开发了一个 Web 应用程序,它使用 Nextjs 应用程序作为前端和一个 Python (Django) API 服务器作为后端。我的大多数前端页面都有对后端服务器的 API 调用(在 Compo
如果我没有通过身份验证,我正在尝试使用NextJS中间件保护一些路由,我正在使用Next-auth进行身份验证,从文档中看,这就是MIDDLEWAR.TS文件应该是什么样子。Rn的问题是,即使当我通过
我正在使用 nextJs,需要添加对 less 和 css 的支持。我想要一个项目同时拥有 next-css 和 next-less 。但它一次接受一个。这是我正在使用的 const withCSS
我正在构建下一个项目的 typescript 。如果我将此配置文件保留为 next.config.js , 我在 tsconfig.json 收到警告说“找不到next.config.ts”。所以 t
我有一个自定义登录网址/ View /模板。我对页面使用 @login_required 装饰器(让 称为 my_page) 需要登录。试图访问 my_site.com/my_page 正确调用 my
下面的代码工作正常: class String def foo next! end end puts 'hh'.foo # hi 这个也很好用: class String d
我在我的Next.js应用程序中使用Next-auth进行身份验证。成功登录后,我立即被重定向到登录页面,表明该会话已变为未经身份验证。。相关代码片段:。_app.tsx:。Layout.tsx:。L
我想在 nextjs 中创建动态页面以匹配以下路由 users/[user]/[dashboard]。我的文件结构 pages/ users/ -[user].js // will
我直接按照官网的步骤操作: https://nextjs.org/docs/ 第一步。 npm install --save next react react-dom 步骤 2. 将脚本添加到 pac
我是一名优秀的程序员,十分优秀!