Question

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

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!’</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.’</p><p><br></br></p><p>‘And and right agin the Old Forest.’</p><p>‘Very much like Mr. Bilbo, Baggins; there was never much to tell of him, till he was drownded.’</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.

这有什么问题吗？

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!’</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.’</p><p><br></br></p><p>‘And and right agin the Old Forest.’</p><p>‘Very much like Mr. Bilbo, Baggins; there was never much to tell of him, till he was drownded.’</p><p><br></br></p></section></div>'
      )
    });  
})

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

Answer 2

这是可行的完整解决方案。我的问题是我在这里使用no-cors的客户端获取处理（fetchOptions）。

const [myFetchedHtml, setMyFetchedHtml] = useState('');
const fetchOptions = {
    method: 'GET',
    mode: 'cors',
};

// Html Fetch via Google cloudFunction
  useEffect(() => fetch(urlCloudFuncPage3, fetchOptions)
    .then(res => res.text())
    .then((html) => {
      const parser = new DOMParser();
      const doc = parser.parseFromString(html, 'text/html');
      const docDiv = doc.querySelector('div').innerHTML;
      return docDiv;
    })
    .then(docDiv => setMyFetchedHtml(docDiv))
    .catch((err) => {
      console.log('Failed to fetch: ', err);
    }), []);

  const createMarkup = () => ({ __html: myFetchedHtml });

然后在组件渲染返回值中使用它，如下所示：

<div dangerouslySetInnerHTML={createMarkup()} />

通过Firebase将HTML提取到React时解析错误

2 个答案: