修复 react-pdf 上的 CORS 问题

问题描述

我正在尝试从 s3 链接中获取 pdf 并在 React 应用程序中显示。我正在使用 react-pdf 。但是当 react-pdf 进行 api 调用以获取 pdf 时，我收到此错误

从源“...”获取“...”的访问已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。如果不透明响应满足您的需求，请将请求的模式设置为“no-cors”以在禁用 CORS 的情况下获取资源。

在 React 应用上我也添加了这个，

来源={{ 标题：{ 'Access-Control-Allow-Origin': '*',},}}

解决方法

此消息告诉我们后端不允许您的客户端发出 HTTP 请求。

所以你必须配置你的 fetch 来发出一个 CORS 请求，但我找不到任何方法来配置 react-pdf 来为你做这件事，你可能需要缓存它然后渲染它...

但是要访问 Amazon S3 链接，您必须管理 Bucket configuration options 以允许 CORS 这样的获取请求（source）：

[
    {
        "AllowedHeaders": [
            "*"
        ],"AllowedMethods": [
            "PUT","POST","DELETE"
        ],"AllowedOrigins": [
            "http://www.example1.com"
        ],"ExposeHeaders": []
    },{
        "AllowedHeaders": [
            "*"
        ],"AllowedOrigins": [
            "http://www.example2.com"
        ],{
        "AllowedHeaders": [],"AllowedMethods": [
            "GET"
        ],"AllowedOrigins": [
            "*"
        ],"ExposeHeaders": []
    }
]

有关 Using cross-origin resource sharing (CORS) 来自 Amazon S3 用户指南的更多信息。