react snap和skipThirdPartyRequests

Question

我将skipThirdPartyRequests设置为true，但react-snap已阻止所有请求。我知道这是正常行为，但我有自己的API，不知道如何在预渲染执行时将API请求发送到react-snap使用的同一主机(localhost:45678)。因此，我在预渲染阶段向生产域发送了请求，但在启用skipThirdPartyRequests后，这些请求被阻止。我需要禁用谷歌分析和其他服务的skipThirdPartyRequests。

有没有办法在预渲染阶段启用skipThirdPartyRequests的情况下与自己的接口进行通信？

Answer 1

我找到了解决方案。我们可以创建自己的express服务器，并使用{..., externalServer: true, port: /*port of your server*/}选项调用react-snap的run函数，这样react-snap就不会启动自己的服务器，而只是向localhost:{port}发送请求。在我们的express服务器中，我们可以使用代理中间件http-proxy-middleware将react-snap`s的请求代理到真正的后端。

我的片段代码：

const http = require('http');
const path = require('path');
const express = require('express');
const fallback = require("express-history-api-fallback");
const serveStatic = require("serve-static");
const proxy = require('http-proxy-middleware');

const {run} = require("react-snap");


let general = {
    "port": 45678,
    "externalServer": true,
    "skipThirdPartyRequests": true,
    "puppeteerArgs": [
        "--no-sandbox",
        "--disable-setuid-sandbox"
    ],
    source: "build",
    publicPath: '/'

};

const startServer = options => {
    const sourceDir = path.normalize(`${process.cwd()}/${options.source}`);
    const app = express()
        .use(proxy('/socket.io', { target: process.env.PRERENDERING_URI, changeOrigin: true, ws: true }))
        .use(options.publicPath, serveStatic(sourceDir))
        .use(fallback("200.html", { root: sourceDir }));

    const server = http.createServer(app);
    server.listen(options.port);
    return server;
};

let server = startServer(general);

Promise.resolve()
    .then(() => run({
        ...general,
        destination: "build/desktop",
        fixWebpackChunksIssue: false,
        userAgent: 'ReactSnap',
        "viewport": {
            "width": 1600,
            "height": 1200

        },
    }))
    .catch(console.error)
    .then(() => {
        server.close()
    });