如何解决充实后,内容丰富的SSR React App出现错误
我正在使SSR响应内容丰富的应用程序,正确地为应用程序充水后,我收到与从服务器正确获取的数据相关的错误。它认为我传递给内容API的密钥不存在,但对于服务器请求却存在。我不太清楚为什么会这样抛出该错误。出于明显的原因,是否有人遇到过此代码在这里减去键的问题。
https://github.com/JoshBowdenConcepts/goop-troop-collective
当前错误如下:
Uncaught TypeError: Expected parameter accessToken
K contentful.js:53
267 client.js:8
l (index):1
100 main.27827bac.chunk.js:1
l (index):1
r (index):1
t (index):1
<anonymous> main.27827bac.chunk.js:1
contentful.js:53:10
干杯
解决方法
问题在于,尽管服务器端渲染树将siteInfo
传递给<App />
,但客户端捆绑包的index.js
却没有。如果您正在运行React的开发版本,则可能会看到与水合树相关的错误与DOM不同。您需要以某种方式将初始道具传递给客户端-一种流行的技巧是将它们注入到全局变量中并将其传递给对方,例如:
服务器:
getSiteInformation().then((info) => {
const siteInfoInjector = `<script>window.__INITIAL_PROPS = ${JSON.stringify(
info.fields
)};</script>`;
return res.send(
data.replace(
'<div id="root"></div>',`${siteInfoInjector}
<div id="root">
${ReactDOMServer.renderToString(
<App siteInfo={info.fields} />
)}
</div>`
)
);
});
客户的index.js
:
const initialProps = window.__INITIAL_PROPS;
ReactDOM.hydrate(
<React.StrictMode>
<App siteInfo={initialProps} />
</React.StrictMode>,document.getElementById("root")
);
不过,请注意,这会将经过字符串化的结果直接注入HTML,这意味着如果您的siteTitle
是hello </script><script>alert(1)
,那么您手中就有XSS。解决此问题的一种方法是通过base-64编码初始值:
服务器:
const siteInfoInjector = `<script>window.__INITIAL_PROPS = "${Buffer.from(
JSON.stringify(info.fields)
).toString("base64")}";</script>`;
客户:
const initialProps = JSON.parse(atob(window.__INITIAL_PROPS));
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。