Question

因此，我正在尝试制作一个将接收用户数据的应用程序，确保他们具有正确的登录信息，并让Puppeteer执行用户数据中指定的操作。正确格式化用户数据后，代码应将对象交给“功能”文件夹中的功能。但是，一旦提交用户数据，就会收到此错误（数字是我的项目ID）：

Access to fetch at 'https://us-central1-###.cloudfunctions.net/run' from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.

并且无论我尝试什么或如何格式化它，都是一样的。

以下是与我相关的内容：在HTML文件中：

<script src="https://www.gstatic.com/firebasejs/5.8.5/firebase.js"></script>
    <script>
        var config = { ... };
        firebase.initializeApp(config);
</script>

在index.js中的functions文件夹中：

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

const puppeteer = require('puppeteer');
const nodemailer = require('nodemailer');

exports.run = functions.https.onCall(async (data) => {
    cors(req, res, async () => {
        console.log(data);
        const browser = await puppeteer.launch({
            args: ['--no-sandbox', '--disable-web-security']
        });

        const page = await browser.newPage();

        await page.goto('https://github.com');
        await page.screenshot({
            path: 'screenshots/github.png'
        });

        browser.close();
    });
});

这里有一些package.json：

"dependencies": {
        "firebase-admin": "^7.0.0",
        "firebase-functions": "^2.2.0",
        "firebase-tools": "^6.7.1",
        "lodash": "^4.17.11",
        "nodemailer": "^5.1.1",
        "puppeteer": "^1.13.0",
        "cors": "^2.8.5"
    },
    "engines": {
        "node": "8"
    },
    "devDependencies": {
        "babel-eslint": "^10.0.1",
        "eslint": "^5.16.0"
    }

提前谢谢！

编辑：我遵循了Philip和Leo的建议，所以index.js现在看起来像这样

var puppeteer = require("puppeteer");
var express = require("express");
var cors = require("cors")({origin: true});
var bodyParser = require('body-parser');

const puppetApp = express();

const corsOptions = {
    origin: ['http://localhost:5000'],
    optionsSuccessStatus: 200
}

puppetApp.use(bodyParser.urlencoded({
    extended: false
}))
puppetApp.use(bodyParser.json())

puppetApp.use(function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

puppetApp.post("/screenshot", cors(corsOptions), async (req, res, next) => {
    const browser = await puppeteer.launch({
        headless: true,
        args: ["--no-sandbox"]
    });
    const page = await browser.newPage();

    await page.goto('https://github.com');
    await page.screenshot({
        path: 'screenshots/github.png'
    });

    browser.close();
});

export const screenshot = functions.https.onRequest(async (req, res) => {
    return puppetApp(req, res);
})

const response = await fetch("/screenshot", {
    body: JSON.stringify(body),
    headers: {
        Accept: "application/json",
        "Content-Type": "application/json"
    },
    method: "POST",
    mode: "cors"
});

我仍然收到相同的错误.. aaggh！

Answer 1

编辑-2019/4/15-参见Code Example

编辑2019/4/10-将计划从spark更改为blaze，以进行出站api /网络调用。

虽然您设置了Express应用，但实际上并没有使用它。

您需要修改以下内容。

来自

exports.run = functions.https.onCall(async (data) => {
    cors(req, res, async () => {

收件人

puppetApp.post("/screenshot", cors(corsOptions), async (req, res, next) => {
const browser = await puppeteer.launch({ headless: true, args: ["--no-sandbox"] });
}

并导出它。

export const screenshot = functions.https.onRequest(async (req, res) => {
  return puppetApp(req, res);
})

您的提取请求应如下所示。

const response = await fetch("#someFunctionLink#", {
      body: JSON.stringify(body),
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json"
      },
      method: "POST",
      mode: "cors"
    });

如何摆脱CORS对Firebase应用中的预检请求错误的响应

1 个答案: