如何使用axios修复前端/客户端请求的CORS？

Question

我制作了一个简单的视频播放器，想要使用不同的

src

文件。所有文件都不与应用程序位于同一服务器上。

视频代码是这样的：

<video preload="metadata" @play="onPlay" @pause="onPause" :src="https://xxx.s3.amazonaws.com/sample_960x400.mp4">
</video>

如果我运行上面的代码，它可以正常工作，没有任何 CORS 警告。

但是，如果我使用

get

对文件执行

axios

：

await axios.get('https://xxx.s3.amazonaws.com/sample_960x400.mp4', {
          withCredentials: false,
          headers: {
            'Access-Control-Allow-Origin': '*',
            'Access-Control-Allow-Methods': 'GET, POST, PATCH, PUT, DELETE, OPTIONS',
            'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Auth-Token',
            'Access-Control-Max-Age': 86400
          }
        })

然后就会导致这个CORS错误：

跨源请求被阻止：同源策略不允许读取 远程资源位于 https://xxx.s3.amazonaws.com/sample_960x400.mp4。 （原因：CORS 请求 没有成功）。状态码：（空）。

我在后端使用

Node.js

和

Express

，但我的文件没有通过我的后端提供服务，因为它们托管在云中。

我的问题是：

1. 为什么

   video

   标签获取文件时没有CORS错误？
2. 为什么

   axios

   会导致CORS错误？
3. 我该如何解决这个问题？

Answer 1

CORS 策略由服务器定义。视频所属服务器定义了谁以及如何访问其资源。因此，如果您无法使用 axios 访问视频，但可以使用标签访问视频，则意味着拥有视频的服务器配置为允许通过浏览器通过 HTML 加载视频，但不允许加载视频通过 axios 模块。 如果您可以一一控制应用程序中出现的所有视频，您可以编写一种方法来选择使用标签显示视频或在发布界面中使用 axios 加载，这样您就可以测试视频在您发布之前是否能正确显示。 但是，如果您的应用程序将自动加载这些视频，您可以对页面进行编程以隐藏您的应用程序无法访问的视频，或者加载标题和链接但显示“此视频无法加载”而不是其缩略图。