firebase SSR 问题，"App requesting permission to access your google account" 弹出而不是网站

Question

我尝试通过“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 帐户的权限。请 select 一个您要使用的帐户。

并且在尝试使用 firebase 管理员 gmail 帐户进入时：

错误：禁止访问您的客户端没有从该服务器获取 URL /app/ 的权限。

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

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

Answer 1

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

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

如果这个东西在没有“renderTOString”的情况下使用反应，那么当它被放置在那里时它就不会。

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

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

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');

Answer 2

当您的 Firebase 函数部署到“us-central1”以外的其他区域时，您可能会被转发到包含消息“应用请求访问您的 google 帐户”的同一页面，因为：

Important: Firebase Hosting supports Cloud Functions in us-central1 only.

firebase SSR 问题，"App requesting permission to access your google account" 弹出而不是网站

firebase SSR problem, "App requesting permission to access your google account" pops up instead of website

firebase

reactjs

server-side-rendering