React JS 前端中的错误 Access-Control-Allow-Origin

Question

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 component but I am getting below error. Please tell me how to solve this issue.

Ref- https://www.npmjs.com/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.

Answer 1

Simple Solution:

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

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

Answer 2

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/