I am Working on a React JS project. I have a separate local apache pdf file server. I am accessing any pdf file from url eg : 'http://local_server_IPaddress/dirname/sample.pdf'. I am passing this url to display pdf file in react ponent but I am getting below error. Please tell me how to solve this issue.

Ref- code

<Document
      file="http://local_server_IPaddress/dirname/sample.pdf"
      onLoadSuccess={this.onDocumentLoadSuccess}
        >
          <Page pageNumber={pageNumber} />
 </Document>

Error log in browser console

Access to fetch at 'http://local_server_IPaddress/dirname/sample.pdf' from origin 'http://localhost:3000' 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.

I am Working on a React JS project. I have a separate local apache pdf file server. I am accessing any pdf file from url eg : 'http://local_server_IPaddress/dirname/sample.pdf'. I am passing this url to display pdf file in react ponent but I am getting below error. Please tell me how to solve this issue.

Ref- https://www.npmjs./package/react-pdf code

<Document
      file="http://local_server_IPaddress/dirname/sample.pdf"
      onLoadSuccess={this.onDocumentLoadSuccess}
        >
          <Page pageNumber={pageNumber} />
 </Document>

Error log in browser console

Access to fetch at 'http://local_server_IPaddress/dirname/sample.pdf' from origin 'http://localhost:3000' 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.

• javascript
• reactjs
• cors
• react-pdf

• 1 does the server at local_server_IPaddress allow CORS? – Jaromanda X Commented Dec 11, 2019 at 9:07
• I don't know but I am fetching any files from url in local network. I am able to display images in my react ponent but not pdf file. it is throwing error – SUMIT VISHWAKARMA Commented Dec 11, 2019 at 9:11
• if the port is different it's a cross origin request – Jaromanda X Commented Dec 11, 2019 at 9:12

2 Answers 2

Simple Solution Used for Development Purposes:

You can add this URL that allows cors before the actual URL

file={"https://cors-anywhere.herokuapp./" + pdf}

Add proxy field into package.json like this:

"proxy": "http://local_server_IPaddress"

Edit the code, and remove url of server like this:

<Document
  file="/dirname/sample.pdf"
  onLoadSuccess={this.onDocumentLoadSuccess}
    >
      <Page pageNumber={pageNumber} />
</Document>

It should works on build environment

See more: https://create-react-app.dev/docs/proxying-api-requests-in-development/