Getting cors error even though the fetch is returning 200

[varand-pez]

Before you start - checklist

• [ x ] I have read documentation in README
• [ x ] I have checked sample and test suites to see real life basic implementation
• [ x ] I have checked if this question is not already asked

What are you trying to achieve? Please describe.
Load a PDF via external URL.
Both the external url and my localhost have the same origin path, that is configured in etc file. But I get CORS error.

Here is the interesting part, in the networks tab I can see that the pdf is fetched with 200, but right after that the cors error is thrown in the console.

I'm sure of my localhost setup because I can finely import images to react components via same assets url.

Describe solutions you've tried
Tried passing it with url object {url: https//....} , but no luck.
Tried switching to regular import vs webpack, but no luck.
import { Document, Page } from 'react-pdf/dist/entry.webpack';
vs
import { Document, Page } from 'react-pdf';

Additional information
See attached screenshot.

Environment

• Browser (if applicable) [Chrome latest]:
• React-PDF version [4.0.5]:
• React version [16.4.0]:
• Webpack version (if applicable) [4.11.1]:

[varand-pez]

Any insight to this?

[varand-pez]

I gave the possibility that there is a CORS issue when trying to fetch from s3, but it fails on publicly available pdf too, such as http://www.africau.edu/images/default/sample.pdf. looking for other solutions, since I haven't received any response.
Just to clarify I have already tried file={{ url: pdfURL }} too. same CORS error : |

[wojtekmaj]

Hey,
I see that clearly you're downloading PDF from a different origin your app is on. In terms of CORS there's nothing that wasn't already told and there's nothing React-PDF specific.

You need to download PDF from exact same domain. Or create a proxy. Or configure the server PDF is on to send appropriate headers to support CORS requests.

HTTP200 is returned by the server because it should do so. It's the browser that rejects this request because it failed to meet Cross-Origin Policy.

[prasagungg]

how to solve this problem ?, i have same error

[usamamashkoor]

Did anyone find a solution for this problem?

[little-buddy]

same issue.
Some people told me that I need to change the pdfjs source code,
and others told me that I need to obtain the pdf through ajax first,
and then pass it in the form of blob.
I think react-pdf can be encapsulated with another layer for corresponding processing and compatibility.

[wojtekmaj]

React-PDF can't work around browsers blocking requests according to Cross-Origin Resource Policy. As previously stated:

• You need to download PDF from exact same domain - same origin, no cross-origin issues.
• Or create a proxy - if file is on a different origin, create a proxy to it on the same origin. Browsers will be happy.
• Or configure the server PDF is on to send appropriate headers to support CORS requests - If you have control over the server that hosts the PDF, you can add Access-Control-Allow-Origin HTTP header to let browsers know it's okay to download the file from this origin.