嘗試使用 React 抓取網站時，出現 CORS 錯誤和 GCP 函數錯誤“函數調用被中斷。錯誤：超出 memory 限制”

Question

我正在使用 React，我正在嘗試使用 Firebase 雲 function 和 Puppeteer 從我的前端抓取網站。 奇怪的是，我的代碼在我的本地服務器上運行，但是當嘗試通過 firebase 在我的實時服務器上實現相同的代碼時，我在下面收到了這個 CORS 錯誤。

以下是我提出請求的前端代碼：

import React, {useState} from "react";
import {Typography, Container, TextField, Button} from "@material-ui/core";
import axios from 'axios'


export const Scraper = ({ formData, setForm, navigation }) => {
  const { firstName, lastName, displayName, services} = formData;
  const [url, setUrl] = useState('')
  const [html, setHtml] = useState('')

  const handleScrape = async() => {

    try {
      const response = await axios.get('https://us-central1-cuti-app-7c963.cloudfunctions.net/app/scrape', {
        params:  {url: url}
      })
      if(response){
          console.log(response.data)
      }else{
        console.log("Failure Link retrieval")
      }      
  } catch (error) {
      console.log("This is the Error:", error)
  }



  return (
    <Container maxWidth="xs" style={{marginTop:'20px', textAlign: "center"}}>
      <Typography variant='h4'>Prospect URLL</Typography>
  
      
      <TextField
        label="Booksy"
        name="url"
        value={url}
        onChange={(e)=> {setUrl(e.target.value)}}
        margin="normal"
        variant="outlined"
        autoComplete="off"
        required
        fullWidth
      />
    
      <Button
        variant="contained"
        fullWidth
        color="primary"
        style={{ backgroundColor: '#cf559f',  
        backgroundSize: "400px",
        backgroundPosition: "center",
        borderRadius: '0',
        color: 'white',
        fontWeight: 'bold',
        border: '3px #cf559f solid',
        letterSpacing: '2px',
        marginTop: "1rem" }}
        onClick={handleScrape}
      >
        Next
      </Button>
    </Container>
  );
};

這是我的 index.js 文件中的代碼片段，來自我的函數：

const express = require("express");
const app = express();
const cors = require("cors");
app.use(express.urlencoded({extends: true}));
app.use(express.json());

const corsOpts = {
    origin: '*',
  
    methods: [
      'GET',
      'POST',
    ],
  
    allowedHeaders: [
        'Content-Type', 'Authorization', 'Accept'
    ],
  };
  
app.use(cors(corsOpts))

const functions = require("firebase-functions");
const admin = require('firebase-admin')
admin.initializeApp(functions.config().firebase)
const puppeteer = require('puppeteer');

app.get('/scrape', cors(), async(req, res) => {
    let { url } = req.query


        try{
            // let services = []
            const browser = await puppeteer.launch()
            const page = await browser.newPage()
            page.setUserAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.121 Safari/537.36');
        
            await page.goto(url)
        
            const proInfo = await page.evaluate(() => {
                const displayName = document.querySelector('h1').innerText
                const phone = document.querySelector('div[class="purify_dFcdTMoibUeU0IQhEe9mHA=="]').innerText
                const imgUrl = document.querySelector('div[class="purify_W9xnvEHvIASJ3h0FC-rz7Q=="]').children[0].currentSrc
                const address = document.querySelector('div[class="purify_prm7MfDXczhTZvcY5KwOuA== purify_Sardy6hfiet162IZ2pYFPA== purify_m9mNOPjpHD0tNTW6GC+hEw=="]').innerText
        
                return({img: imgUrl, displayName: displayName, phone: phone, address: address})
    
            }
            )
    
    
            const services = await page.$$eval('div[class="purify_TJBmvp84N9Sj6dyMFksHKg=="]', divs => {
    
                return divs.map(x => {
                    return({
                        name: x.children[0].children[0].innerText,
                        details: x.children[0].children[1].innerText,
                        price: x.children[1].children[0].children[0].children[0].children[0].children[0].innerText,
                        duration: x.children[1].children[0].children[0].children[0].children[0].children[1].innerText
                    })
                })
            })
    
    
            res.json({proInfo: proInfo, services: services})
    
        }catch (e) {
            console.log("ERROR =>", e)
        }
})

任何和所有的幫助將不勝感激！！！

更新 #1：對 CORS 選項進行了一些編輯......但仍然得到相同的 ERR，代碼為 500..

下面的 img 是我在“網絡”選項卡上看到的

更新#2：深入研究錯誤，我注意到 GCP 上的日志，它指出“函數調用被中斷。錯誤：超出 memory 限制。”

見下圖。

新問題是：我們可以增加 memory 限制嗎？ 如果是這樣，怎么做？

Answer 1

您必須定義允許的來源以允許您的前端和后端交互。 您使用原點，但它們沒有定義在哪里*

Answer 2

似乎您需要向 cors 傳遞更多選項。

在你的index.js文件中試試這個。

const corsOpts = {
  origin: '*',

  methods: [
    'GET',
    'POST',
  ],

  allowedHeaders: [
    'Content-Type',
    'Authorization',
    'Accept',
  ],
};

app.use(cors(corsOpts));