react-pdf cors到gcp存储

Question

我想从我的GCP中获取pdf文件，但是我得到了CORS错误。好的，np。我试着在GCP中找到解决这个问题的方法。找到此示例：

https://bitmovin.zendesk.com/hc/en-us/articles/360000059353-How-do-I-set-up-CORS-for-my-Google-Cloud-Storage-Bucket-

我已经遵循了所有这些说明：

echo '[{"origin": ["*"],"responseHeader": ["Content-Type"],"method": ["GET", "HEAD"],"maxAgeSeconds": 3600}]' > cors-config.json

gsutil cors set cors-config.json gs://booknote-pdf-files-store

​

​

​

​

import React, { useState } from 'react'
import { Document, Page } from 'react-pdf'
import { withStyles } from '@material-ui/styles'
import PropTypes from 'prop-types'

import CircularProgress from '@material-ui/core/CircularProgress'

import styles from './styles'



const Application = ({ classes }) => {
  const [numPages, setNumPages] = useState(null)
  const [pageNumber, setPageNumber] = useState(1)

  const onDocumentLoadSuccess = ({ numPages }) => {
    setNumPages(numPages)
  }

  return (
    <div className={classes.container}>
      <Document
        file="https://storage.cloud.google.com/booknote-pdf-files-store/living_in_the_light.pdf"
        onLoadSuccess={onDocumentLoadSuccess}
        renderMode="svg"
        loading={<CircularProgress />}>
        <Page pageNumber={pageNumber} />
      </Document>
    </div>
  )
}

Application.propTypes = {
  classes: PropTypes.instanceOf(Object).isRequired,
}

但我仍然得到CORS错误。我做错了什么？如果您需要更多信息，请让我知道。

您还可以查看我用于此目的的npm包：

https://www.npmjs.com/package/react-pdf

Answer 1

假设用于设置cors的gsutil命令确实有效(我会再次检查以确保运行：gsutil cors get gs://booknote-pdf-files-store并查看更改是否已反映出来)。简而言之，react-pdf在很大程度上依赖于PDF.js，所以这可能是由PDF.js从服务器获取文件的方式造成的。

直接取自PDF.js常见问题，"PDF.js使用与任何其他JavaScript代码相同的权限运行，这意味着它不能进行跨域请求“。

不过，有一些解决方法可供您使用，其中之一是使用代理，如果它不在同一来源，则返回Access-Control-Allow-Origin标头。因此，您对文件的请求将不会发送到GCS，但会发送给您的代理，后者会将它们转发给GCS。我高度推荐PDF.js' FAQ，它肯定会为你指明正确的方向。