firebase SSR 问题，弹出“应用程序请求访问您的谷歌帐户的权限”而不是网站

IT技术 reactjs firebase server-side-rendering
2021-05-03 05:59:27

我试图通过“razzle”帮助工具使用 create-React 基础知识制作一个react SSR 网站。

该应用程序最初用于此：

'use strict'
const functions = require('firebase-functions');
const app = require('./server/build/server.bundle.js').default;

exports.app = functions.https.onRequest(app)

但是当我把它改成这样时：

'use strict'
const functions = require('firebase-functions');
const App = require('./server/build/server.bundle.js').default;


const React = require('react')
const express = require('express');
const fs = require('fs'); 
const app = express();
const {RenderToString} = require('react-dom/server');


const index = fs.readFileSync(__dirname +'/index.html', 'utf8');

app.get ('**', (req, res) => {
    const html = RenderToString(App);
    const finalHtml = index.replace('<!-- ::APP:: -->', html)
    res.set('Cache-Control', 'public, max-age=600, sMax-age=1200');
    res.send(finalHtml);
}) 


exports.shell = functions.https.onRequest(app);

而不是我得到的网站

一个应用程序正在请求访问您的 Google 帐户的权限。请选择您要使用的帐户。

并尝试使用 firebase admin gmail 帐户登录时：

错误：禁止您的客户端无权从此服务器获取 URL /app/。

我做错了什么，我该如何解决？

原来的 SSR 功能被移除，新的exports.shell 成功添加。

1个回答

如果函数内部有问题，没有通过 eslint 等过程解决，那么它会导致权限页面而不是你的自然页面。

这里的问题是使用 Razzle 包时，您将“renderTOSString”放置在另一个文件中。

如果使用 react 在没有“renderTOString”的情况下工作，则将其放置在那里时不会。

调整 razzle 配置，以便您可以添加“firebase 缓存”并调整路由。您需要转到“由 razzle 生成的 src/server.js 文件”。

要添加缓存和路由，它应该如下所示：

import App from './App';
import React from 'react';
import express from 'express';
import { renderToString } from 'react-dom/server';
import { StaticRouter } from 'react-router-dom';

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const server = express();

server
  .disable('x-powered-by')
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
  .get('/*', (req, res) => {
    const markup = renderToString(    <StaticRouter
      location={req.url}
      context={context}
    >
      <App /></StaticRouter>);
    res.set('Cache-Control', 'public, max-age=300, s-maxage=1600');
    res.send(
      `<!doctype html>
    <html lang="">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta charSet='utf-8' />
        <title>Welcome to Razzle</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        ${assets.client.css
          ? `<link rel="stylesheet" href="${assets.client.css}">`
          : ''}
         ${process.env.NODE_ENV === 'production'
           ? `<script src="${assets.client.js}" defer></script>`
           : `<script src="${assets.client.js}" defer crossorigin></script>`}
    </head>
    <body>
        <div id="root">${markup}</div>
    </body>
</html>`
    );
  });

export default server;

变化在这里：

 <StaticRouter
  location={req.url}
  context={context}
>
  <App /></StaticRouter>);
res.set('Cache-Control', 'public, max-age=300, s-maxage=1600');
其它你可能感兴趣的问题
上一篇通过父组件的 onClick 更新组件状态 下一篇仅使用 Babel 转换 jsx