活动存储到 S3 |反应：CORS 问题

问题描述

第一次在 Stack Overflow 发帖。我目前在一个编码训练营，仍然是一个初学者。我正在使用 Ruby on Rails 和 React 制作一个 FullStack 应用程序。将我的代码部署到 Netlify 和 Heroku 后，AWS|S3 出现 CORS 错误。

我的尝试是： 我可以通过上传按钮添加个人资料图片。我在本地实施了 Active Storage，这很有效。但是，我了解到我需要使用 S3，因为 Heroku 在本地无法很好地使用它。当我尝试通过 S3 上传时遇到以下问题：

Access to XMLHttpRequest at 'https://gamer-gazebo.s3.us-east-2.amazonaws.com/dudfbez2iycfudm8min1qfhuqckk?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAIN4Y7E7YXHAZO5KQ%2F20201227%2Fus-east-2%2Fs3%2Faws4_request&X-Amz-Date=20201227T203655Z&X-Amz-Expires=300&X-Amz-SignedHeaders=content-length%3Bcontent-md5%3Bcontent-type%3Bhost&X-Amz-Signature=936b23109e3525fbff40bbed5b206fb1b42534c28e2ae9b442e7be1bc367127f' from origin 'https://gamergazebo.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

这是我用于此 API 调用的 React 代码：

      const upload = new DirectUpload(file,`${state.url}/rails/active_storage/direct_uploads`)
      upload.create((error,blob) => {
        if (error) {
          console.log(error)
        } else {
          fetch(`${state.url}/basic_user_infos/${state.user_id}`,{
            method: 'PUT',headers: {
              "Content-Type": "application/json",Authorization: "bearer " + token,'Accept': 'application/json',"Access-Control-Allow-Origin": '*'
            },body: JSON.stringify({image: blob.signed_id})
          }) 
          .then(response => response.json())
          .then(result => console.log(result))
        }
      })
    }



const handleChange = (event) => {
  if (event.target.name === "image") {
    console.log(event.target.files[0])
    setFormData({...formData,[event.target.name]: event.target.files[0]})

  }
  else{
      setFormData({...formData,[event.target.name]: event.target.value})
  }
}
const handleSubmit = (event) => {
  event.preventDefault()
  return fetch(state.url + "/basic_user_infos",{
    method: "post",headers: {
        "Content-Type": "application/json","Access-Control-Allow-Origin": '*',Authorization: "bearer " + token
    },body: JSON.stringify({
      pronoun: formData.pronoun,username: formData.username,country: formData.country,about_me: formData.about_me,user_id: formData.user_id,birthdate: formData.birthdate,})
})
.then(response => response.json())
.then(data => uploadFile(formData.image,data))
console.log(formData.image)
}

这是我在 Ruby on Rails 中的控制器：

  def create
    @basic_user_info = BasicUserInfo.new(basic_user_info_params)
    @basic_user_info.id = @user.id

    if @basic_user_info.save
      render json: @basic_user_info,status: :created,location: @basic_user_info
    else
      render json: @basic_user_info.errors,status: :unprocessable_entity
    end
  end

  # PATCH/PUT /basic_user_infos/image
  def update
    if @basic_user_info.update(image: params[:image])
      image = rails_blob_path(@basic_user_info.image)
      render json: {birthdate: @basic_user_info.birthdate,pronoun: @basic_user_info.pronoun,username: @basic_user_info.username,country:@basic_user_info.country,about_me:@basic_user_info.about_me,user_id: @basic_user_info.user_id,image: image}
    else
      render json: @basic_user_info.errors,status: :unprocessable_entity
    end
  end

当然，也许我需要用存储桶编辑 S3 中的一些设置？我想可能是因为所有的东西都是为 Active Storage 设置的，以便在本地进行开发，当我将它切换到 AWS|S3 进行生产时，它会自动知道如何处理它。不确定是否包括 Blob？抱歉，这可能有点乱，我还在学习，有点紧张，甚至在这里发帖寻求帮助。

如果我需要提供更多信息，或者我应该检查 S3 中的设置，请告诉我。

谢谢大家！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）