React axios.get-Firebase

Question

我将一些mp3文件上传到了Firebase的存储中。

我正在使用axios来获取存储在存储中的相关文件。

在“规则”标签中，我将权限更改为：

      allow read, write, request;

但是，启动网站时仍然出现错误：

Access to XMLHttpRequest at 
'gs://******.appspot.com/****/****' from origin 'http://localhost:3000' 
has been blocked by CORS policy: Cross origin requests are only 
supported for protocol schemes: http, data, chrome, chrome-extension, 
https.

这是我的代码：

constructor(props) {
    super(props);

    this.state = {
        allRecords: [],
}

componentDidMount () {
  axios.get('gs://******.appspot.com/****/****')
      .then(response => {
        this.setState({allRecords: response.data})
        console.log(response.data)
      })
      .catch(error => alert("An error has occurred, please try again and check your internet connection."))
    }

我做错什么了吗？我完全确定get方法的地址是正确的（我刚刚从Firebase复制了它）。

---

编辑：

我运行命令

gsutil cors set cors.json gs://****.appspot.com :

但是，当我加载我的网站时，我仍然遇到相同的错误。

Answer 1

您需要更新Cloud Storage存储桶上的CORS策略，以这种方式直接在浏览器中下载文件。 ¹

您可以使用gsutil命令行工具。针对您的方案的典型策略文件可以包含以下指令：

[
  {
    "origin": ["http://localhost:3000"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

您可以使用您要访问存储桶的其他主机更新来源列表。

Answer 2

使用扩展名不是理想的解决方案。 听起来好像未在服务器上配置CORS，但我不确定，但是请查看此stackoverflow answer，应该向您推荐this group。

Answer 3

安装CORS chrome扩展并启用它，这将为CORS添加Access-Control-Allow-Origin，Access-Control-Allow-Methods和Access-Control-Allow-Header标头。