使用axios时，S3抛出400错误请求

Question

我正在尝试使用HEAD从我的React App向我的Amazon S3发送一个axios请求，但不断出现以下错误

Unhandled promise rejection Error: "Request failed with status code 400"

我的存储桶策略是这样的

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AddPerm",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::bucket_name/*"
        }
    ]
}

我的CORS配置是这样的

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

当我执行Postman请求或curl -I请求时错误不会发生，但是当我使用axios时错误就会发生

我的代码非常简单，看起来像这样

const { data: headerData } = await axios.head(url);
console.log("headerData", headerData);

这有什么问题吗？

谢谢

S3图片，

Answer 1

以下内容对我来说可以在浏览器之外针对公开可读的对象正常工作：

const axios = require('axios');

const s3url = 'https://s3.amazonaws.com/mybucket/cat.jpg';

const headObject = async (url) => {
  const { headers } = await axios.head(url);
  console.log('headers', headers);
};

headObject(s3url);

因此，大概您遇到的问题与CORS有关。您能否将以下内容添加到存储桶的CORSRule配置中，然后重试：

<ExposeHeader>ETag</ExposeHeader>

如果您具有自定义元数据，则还要添加（用您的元数据名称替换custom-header）：

<ExposeHeader>x-amz-meta-custom-header</ExposeHeader>