反应 axios.get - Firebase答案

【问题标题】：React axios.get - Firebase反应 axios.get - Firebase
【发布时间】：2019-02-15 07:32:18
【问题描述】：

我将一些 mp3 文件上传到我在 Firebase 中的Storage。

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

在“规则”选项卡中，我将权限更改为：

      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 :

然而，当我加载我的网站时，我得到了同样的错误。

【问题讨论】：

因为它是一个获取请求，你可以在普通浏览器中点击 api 吗？就像复制网址并粘贴到浏览器中并尝试点击它。检查您收到的任何回复。 api 是否还需要任何标头或一些参数来识别这是一个有效的用户
Firebase Storage and Access-Control-Allow-Origin的可能重复

标签： javascript reactjs firebase axios

【解决方案1】：

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

您可以为此使用gsutil 命令行工具。您的场景的典型策略文件可以包含以下指令：

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

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

【讨论】：

我安装了 gsutil 但它仍然对我不起作用，同样的错误。我打开了 .json 文件，将其保存在我的项目中。我做错了吗？
协议方案也是必要的。
哪个协议？
列出的来源应该是有效的 URI。查看更新的示例策略文件内容。
"localhost:3000" 是一个有效的地址。我是否在正确的位置创建了 cors.json 文件？（cors.json 和 package.json 一起在我的项目中）另外，请看一下我的问题，我对其进行了编辑并添加了我在 gsutil cors set cors.json gs://kollab-music.appspot 之后得到的内容。 com 在命令行中。

【解决方案2】：

使用扩展并不是一个理想的解决方案。 这听起来好像服务器上没有配置 CORS，我不完全确定，但请查看此 stackoverflow answer，应该将您推荐给 this group。

【讨论】：

【解决方案3】：

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

【讨论】：