修复react-pdf上的CORS问题

Question

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

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

在React应用程序上，我还添加了以下内容：

source={{ header：{‘访问控制-允许回源’：'*'，}，}

Answer 1

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

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

然而，要访问亚马逊S3链接，您必须管理Bucket configuration options，以允许像这样的CORS fetch请求(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": []
    }
]

有关更多信息，请参阅亚马逊S3用户guid中的Using cross-origin resource sharing (CORS)。