修复了react-pdf的CORS问题

Question

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

访问在'…"来自原产地"……'已被CORS策略阻止:请求的资源上没有'Access-Control-Allow-Origin'标头。如果一个不透明的响应满足你的需要，设置请求的模式为'no-cors'来获取CORS禁用的资源。

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

={{来源标题:{"Access-Control-Allow-Origin":"*",}，}}

Answer 1

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

所以你必须配置你的fetch使CORS请求，但我找不到任何方法配置react-pdf为你做它，你可能不得不缓存它，然后渲染它…

但是要访问Amazon S3 Link，您必须管理Bucket configuration options以允许CORS获取请求，如以下(来源):

[
{
"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": []
}
]

有关Amazon S3用户指南中使用跨域资源共享(CORS)的更多信息。