在 Flare 中解决 Laravel 和 Vue CSRF 问题：如何自定义 FlareClient.ts

在 Flare 中解决 Laravel 和 Vue CSRF 问题：一种自定义 FlareClient.ts 的方法

简介

在将 Flare 与 Laravel 和 Vue 集成时，您可能会遇到一个问题，即发送错误报告时会出现 419 状态代码。这是由于 Flare 的 sendReport 方法不发送 CSRF 令牌，导致违反了 CSRF 保护。

问题

当启用广告拦截器时，向 Flare 发送错误报告会失败。这是因为广告拦截器阻止了发送到 Flare 服务器的请求。一种可能的解决方案是使用代理，但它会引入其他问题，例如需要更改类定义。

自定义 FlareClient.ts

为了解决这个问题，我们可以自定义 FlareClient.ts 文件，并在 sendReport 方法中添加 CSRF 令牌。这将允许 Flare 在没有代理的情况下发送错误报告。

要自定义 FlareClient.ts，请执行以下步骤：

1. 复制 FlareClient.ts 文件到您的项目中。
2. 在 sendReport 方法中，添加以下行以获取 CSRF 令牌：

const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

3. 在将报告发送到 Flare 服务器之前，将 CSRF 令牌添加到请求头：

xhr.setRequestHeader('X-CSRF-TOKEN', csrfToken);

修改后的 sendReport 方法

修改后的 sendReport 方法如下：

private sendReport(report: Flare.ErrorReport): void {
    if (
        !assert(
            this.config.key,
            'The client was not yet initialised with an API key. ' +
                "Run client.light('<flare-project-key>') when you initialise your app. " +
                "If you are running in dev mode and didn't run the light command on purpose, you can ignore this error.",
            this.debug
        )
    ) {
        return;
    }

    if (this.maxReportsPerMinuteReached()) {
        return;
    }

    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

    Promise.resolve(this.beforeSubmit(report)).then(reportReadyForSubmit => {
        if (!reportReadyForSubmit) {
            return;
        }

        const xhr = new XMLHttpRequest();
        xhr.open('POST', this.config.reportingUrl);

        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
        xhr.setRequestHeader('x-api-token', this.config.key);
        xhr.setRequestHeader('X-CSRF-TOKEN', csrfToken);

        xhr.send(flatJsonStringify({ ...reportReadyForSubmit, key: this.config.key }));

        this.reportedErrorsTimestamps.push(Date.now());
    });
}

结论

通过自定义 FlareClient.ts 并添加 CSRF 令牌，我们解决了在集成 Flare 时遇到的 CSRF 问题。这种方法可以防止违反 CSRF 保护，并允许 Flare 在没有代理的情况下发送错误报告。

常见问题解答

1. 为什么我需要自定义 FlareClient.ts？

   • 您需要自定义 FlareClient.ts 因为默认的 sendReport 方法不发送 CSRF 令牌，导致在启用广告拦截器时发生 419 状态代码错误。

2. 如何自定义 FlareClient.ts？

   • 复制 FlareClient.ts 文件到您的项目中，然后在 sendReport 方法中添加代码以获取并添加 CSRF 令牌。

3. 这种方法是否适用于所有情况？

   • 这种方法适用于 Laravel 和 Vue 应用程序，但可能需要根据您自己的项目和设置进行调整。

4. 使用代理会带来哪些额外问题？

   • 使用代理需要更改类定义，并可能引入其他复杂性，例如需要维护代理服务器。

5. 除了这个解决方案，还有其他方法可以解决 CSRF 问题吗？

   • 另一种方法是将 Flare 的 reportingURL 设置为 API 端点，但这需要使用错误处理程序来将错误报告发送到控制器。