React-pdf: Getting cors error even though the fetch is returning 200

Created on 5 Mar 2019  路  3Comments  路  Source: wojtekmaj/react-pdf

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]:

cors

question

Most helpful comment

Any insight to this?

All 3 comments

Any insight to this?

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 : |

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.

Was this page helpful?
0 / 5 - 0 ratings