javascript - 通过 Firebase 获取 html 到 React 时解析错误

Question

我正在尝试使用 Firebase 创建一个云函数端点，我可以从中获取 html 作为字符串。“惊人”的想法是在带有 fetch 的 React 组件中显示 HTML 页面。这是 Firebase 快速实现：

const functions = require('firebase-functions');
const express = require('express');
const cors = require('cors')({origin: true});
const app = express();

app.get('/page3', (request, response) => {
  cors(request, response, () => {
    response.send(
          '<div><p>Det är en sida</p><section><h1>Return of the King</h1><h2><span>A Long-Expected Party</span></h2><p><br></br></p><p>When Mr. Bilbo Baggins of Bag End announced</p><p>Bilbo was very rich and for fame, wealth.</p><p>‘It will have to be paid for,’ they said. ‘It isn’t natural, and trouble will come of it!’&lt;/p><p><br></br></p><p><br></br></p><p><span style="background-color: rgb(255, 255, 0);">Note: Look at this link to understand more</span>: <a href="www.svt.se" target="_blank">svt.se</a></p><p><br></br></p><p><br></br></p><p>‘A very nice well-spoken gentlehobbit is Mr. Bilbo, as I’ve always said,’ the Gaffer declared. With perfect truth: for Bilbo was very polite to him.</p><p>‘But what about this Frodo that lives with him?’ asked Old Noakes of Bywater. ‘Baggins is his name, but he’s more than half a Brandybuck, they say.’&lt;/p><p><br></br></p><p>‘And and right agin the Old Forest.’&lt;/p><p>‘Very much like Mr. Bilbo, Baggins; there was never much to tell of him, till he was drownded.’&lt;/p><p><br></br></p></section></div>'
      )
    });  
})

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

在 React 应用程序中，我只想获取并解析端点提供的 html 字符串，然后尝试记录它。我得到的错误是：

<parseerror style= "display: block; white-space: pre; border: 2px solid #c77; padding: 0 1em 0 1em; margin: 1em; background-color: #fdd; color: black">
    <h3> This page contains the following errors: </h3>
    <div style="font-family:monospace;font-size:12px"> error on line 1 at column 1:     Extra content at the end of the document
    </div>

之后在 Chrome 中出现黄色警告：

Cross-Origin Read Blocking (CORB) blocked cross-origin response https://easye-9364e.firebaseapp... with MIME type text/html. See https://www.chromestatus.com/feature/56 for more details.

这里有什么问题？

标签： javascriptreactjsfirebasecorsgoogle-cloud-functions

Answer 1

你错过了这条线：

app.use(cors);

前app.get()

所以你的代码应该是这样的：

const functions = require('firebase-functions');
const express = require('express');
const cors = require('cors')({origin: true});
const app = express();

app.use(cors);
app.get('/page3', (request, response) => {
  cors(request, response, () => {
    response.send(
          '<div><p>Det är en sida</p><section><h1>Return of the King</h1><h2><span>A Long-Expected Party</span></h2><p><br></br></p><p>When Mr. Bilbo Baggins of Bag End announced</p><p>Bilbo was very rich and for fame, wealth.</p><p>‘It will have to be paid for,’ they said. ‘It isn’t natural, and trouble will come of it!’&lt;/p><p><br></br></p><p><br></br></p><p><span style="background-color: rgb(255, 255, 0);">Note: Look at this link to understand more</span>: <a href="www.svt.se" target="_blank">svt.se</a></p><p><br></br></p><p><br></br></p><p>‘A very nice well-spoken gentlehobbit is Mr. Bilbo, as I’ve always said,’ the Gaffer declared. With perfect truth: for Bilbo was very polite to him.</p><p>‘But what about this Frodo that lives with him?’ asked Old Noakes of Bywater. ‘Baggins is his name, but he’s more than half a Brandybuck, they say.’&lt;/p><p><br></br></p><p>‘And and right agin the Old Forest.’&lt;/p><p>‘Very much like Mr. Bilbo, Baggins; there was never much to tell of him, till he was drownded.’&lt;/p><p><br></br></p></section></div>'
      )
    });  
})

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