Question

Chrome最近实现了一项名为 CORB 的新功能，在极少数情况下，它阻止了我的网站显示在AWS S3中托管的图像。

有点问题，我发现我的图像当前以 header ContentType of application / x-www-form-urlencoded 发送，而该图像应为 image / jpeg >。在amazon控制台中，您可以更新整个存储桶的元数据内容类型，但不幸的是，它不适用于将来要上传的新图像。

所以我想知道我的代码是否做错了什么？（我将在下面显示一些摘录），或者是否有可能在amazone中创建JOB / CRON以便递归更新上传图像的元数据内容类型，以确保不会发生 CORB 问题？

解决方案之一是通过图像优化器处理程序（例如https://imagekit.io/）来解决此问题，但对于化身图像而言，其图像来自亚马逊以外的其他来源（它可能来自gravatar ，或Facebook或Google也无法使用）（除非编写用于检查特定图片是否来自亚马逊的正则表达式脚本）

我正在将nodejs / express用于后端，并对前端进行响应。我没有将图像上传到服务器上，而是直接从前端上传到亚马逊。为此，我要求亚马逊提供一个signedUrl，并在前端使用它进行上传。

后退：

const AWS = require("aws-sdk")
const router = express.Router()
// CONFIG AMAZONE
const s3 = new AWS.S3({
  accessKeyId: keys.aws.clientID,
  secretAccessKey: keys.aws.clientSecret,
  signatureVersion: "v4",
  region: "eu-west-3"
})

// @route  GET api/profile/avatar/upload
// @desc   Upload your profile avatar
// @access Private
router.get(
  "/",
  passport.authenticate("jwt", { session: false }),
  (req, res) => {
    const key = `avatars/${req.user.id}/${uuid()}-avatar-image.jpeg`
    s3.getSignedUrl(
      "putObject",
      {
        Bucket: "mybucket",
        ContentType: "image/jpeg",
        Key: key.toString()
      },
      (err, url) => res.send({ key, url })
    )
  }
)

前锋：

在这里我正在使用redux和axios库。这最后一个有一个与Amazon兼容的标头问题，因此您需要禁用默认标头才能正确上传图片

// UPDATE PROFILE PICTURE
export const sendAvatar = file => async dispatch => {
  dispatch(loading())
  try {
    const uploadConfig = await axios.get("/api/global/avatar")
    delete axios.defaults.headers.common["Authorization"]
    console.log(uploadConfig)
    console.log(file)
    file &&
      (await axios.put(uploadConfig.data.url, file, {
        headers: {
          ContentType: file.type
        }
      }))
    const token = localStorage.getItem("jwtToken")
    axios.defaults.headers.common["Authorization"] = token
    const res = await axios.post("/api/global/avatar", {
      avatar: uploadConfig.data.key
    })
    dispatch({
      type: USER_AVATAR_FETCH,
      payload: res.data.avatar
    })
  } catch (e) {
    dispatch({
      type: GET_ERRORS,
      payload: e.response.data
    })
  }
  dispatch(clearLoading())
}

将图片与ContentType图片/ jpeg-nodejs上传到S3并做出反应？

0 个答案: