reactjs - 修复 react-pdf 上的 CORS 问题

Question

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

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

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

来源={{标题:{'访问控制允许来源':'*'，},}}

Answer 1

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

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

但是，要访问 Amazon S3 Link，您必须管理 Bucket configuration options允许 CORS 像这样获取请求(source):

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

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