Fix CORS issue on react-pdf

Question

I am trying to fetch pdf from s3 links and display in the react app. I am using react-pdf for it. but when react-pdf makes api call to fetch the pdf I am getting this error

Access to fetch at '...' from origin '...' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

on React app I have also added this,

source={{ header: { 'Access-Control-Allow-Origin': '*', }, }}

Seems like you need to understand what CORS is a bit better. The Access-Control-Allow-Origin header needs set on the server (s3), not the client (react app). This is a good write up, be sure to notice the difference between request and response. For example, the 'preflight' is a common point of confusion. auth0.com/blog/… — Karl Galvez

Mamrezo Mamrezo · Accepted Answer · 2021-03-01T05:42:42

This message tell us that back-end not allow to your client side make HTTP request.

So you have to config your fetch to make a CORS request, but I couldn't find any way to config react-pdf to do it for you, you may have to cache it and then render it...

However to access Amazon S3 Link you have to manage Bucket configuration options to allow CORS fetch requests like this(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": []
    }
]

For more information Using cross-origin resource sharing (CORS) from Amazon S3 user guid.

Fix CORS issue on react-pdf

1 Answers