Axios CORS Vultr S3“否‘访问控制-允许-来源’”

Question

因此，我尝试使用axios向Vultr S3对象存储桶上的图像发出请求，以便将其转换为blob并在我正在使用的包中使用它。

然而，尽管url是公开的，并且您可以在浏览器中访问它们，但使用axios发出请求会触发CORS错误。奇怪的是，响应代码仍然是200。

下面是错误(我已经审查了urls之类的)；Access to XMLHttpRequest at 'url' from origin 'http://laravel-valet.test' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

从下图可以看出，请求是成功的，内容长度也是正确的，所以我不太确定问题是什么。

​

我也尝试过使用fetch API，以防这是Axios的一些奇怪的事情，但似乎即使fetch处于"no-cors“模式，它也只是返回一个空响应。

希望有人能在这里为我解释这个问题，因为我相当确信这不是我的问题，但由于我使用的是S3的Vultr，似乎他们没有提供任何允许域名或禁用CORS的方法，所以我不确定该怎么办。

Answer 1

您可以使用s3cmd设置CORS配置。

首先，创建一个包含CORS- .xml的配置文件(关于该here的更多信息)

<CORSConfiguration>
<CORSRule>
    <ID>Allow WebFont for example.com</ID>
    <AllowedOrigin>https://www.example.com</AllowedOrigin>
    <AllowedOrigin>http://www.example.com</AllowedOrigin>
    <AllowedOrigin>https://example.com</AllowedOrigin>
    <AllowedOrigin>http://example.com</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedHeader>Content-*</AllowedHeader>
    <AllowedHeader>Host</AllowedHeader>
    <ExposeHeader>ETag</ExposeHeader>
    <MaxAgeSeconds>86400</MaxAgeSeconds>
</CORSRule>
</CORSConfiguration>

然后，使用以下命令上传配置：

s3cmd setcors cors-config.xml s3://bucket-name

Answer 2

您需要在服务器端代码中添加标头。

header('Access-Control-Allow-Origin: *');  
header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');