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

firebase SSR 问题，“应用程序请求访问您的 Google 帐户的权限

问题描述：

我尝试通过razzle"使用 create-React 基础知识制作一个 React SSR 网站.辅助工具.

I have attempted to make a react SSR website using create-React basics through the "razzle" helper tool.

该应用最初用于此:

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

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

但是当我把它改成这样:

but when I changed it to this:

'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 帐户的权限.请选择您要使用的帐户.

An application is requesting permission to access your Google Account. Please select an account that you would like to use.

并在尝试使用 firebase 管理员 Gmail 帐户登录时:

and upon attempting entry with the firebase admin gmail account:

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

Error: Forbidden Your client does not have permission to get URL /app/ from this server.

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

What have I done wrong, and how do I fix this?

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

The original function which worked for SSR was removed, and the new one exports.shell was added sucessfully.

答

如果函数内部存在问题，而这些问题不是通过 eslint 等进程解决的，那么它会导致权限网页而不是您的自然网页.

IF the function has problems within it that are not adressed through processes such as eslint, then it will cause the permission webpage instead of your natural webpage.

这里的问题是，使用 Razzle 包时，您有renderTOSString"；放在另一个文件中.

The problem here is that using the Razzle package you have the "renderTOSTring" placed in another file.

如果事情没有renderTOString"在那里使用 react 放置在那里时不会.

If the thing worked with no "renderTOString" there using react it will not when it is placed in there.

调整 razzle 配置，以便你们都可以添加firebase 缓存"；并调整路由.你需要去razzle生成的src/server.js"文件.

To adjust the razzle config so that you can both add in "firebase caching" and adjust the routing. ou need to go to the "src/server.js file generated by razzle.

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

TO add caching and routing it should look like this:

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

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

相关推荐