0

我正在开发一个React JS项目。我有一个单独的本地 apache pdf 文件服务器。我正在从 url 访问任何 pdf 文件，例如：' http://local_server_IPaddress/dirname/sample.pdf '。我正在传递此 url 以在 react 组件中显示 pdf 文件，但出现以下错误。请告诉我如何解决这个问题。

参考https://www.npmjs.com/package/react-pdf 代码

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

浏览器控制台中的错误日志

CORS 策略阻止了从源“ http://localhost:3000 ”获取“ http://local_server_IPaddress/dirname/sample.pdf ”的访问权限：没有“Access-Control-Allow-Origin”标头出现在请求的资源。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

4

2 回答 2

4

简单的解决方案：

您可以在实际 URL 之前添加允许 cors 的 URL

file={"https://cors-anywhere.herokuapp.com/" + pdf}
于 2020-12-03T15:50:53.470 回答
1

像这样添加proxy字段package.json：

"proxy": "http://local_server_IPaddress"

编辑代码，并像这样删除服务器的 url：

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

它应该适用于构建环境

查看更多：https ://create-react-app.dev/docs/proxying-api-requests-in-development/

于 2019-12-11T09:11:37.867 回答