如何修复 Vue.js 和 Spring Boot 应用程序中的 CORS 错误

Question

CORS 已阻止从源“http://localhost:8080”访问“https://.amazonaws.com/.mp3”中的音频策略：请求的资源上不存在“Access-Control-Allow-Origin”标头

我们有一个 vue.js 前端和 spring boot 后端。

vue.js 文件中有一个标签，它通过调用 spring boot 后端服务器获取 src 链接。后端返回 src 链接。 如您所见，下面是运行时音频组件

<audio data-v-3f267e7a="" src="https://****.amazonaws.com/****.mp3" eq-attached="true"></audio>

我很困惑为什么在这种情况下浏览器会抛出 CORS 错误。请让我知道为什么首先出现错误以及如何解决这个问题。在 spring 安全文件中已经启用了 CORS。我已经尝试在 spring 控制器中使用 @CrossOrigin 注释。

Answer 1

由于您的错误是 CORS，在您的 vue.js 和亚马逊音频 url 之间，spring boot 与此无关。

通常 CORS 对我们说：没有 Web 应用程序可以使用 javascript 下载我的资源。

在您的情况下，亚马逊告诉您：您在本地主机上的网络无法下载我的音频。

如果您是亚马逊的所有者，并且您希望任何网站都能够下载您的音频，您只需在音频 url 中添加此 response 标题：

Access-Control-Allow-Origin : *

如何解决？

尝试使用最小的ajax invocation 来下载音频网址。有了这个，您可以验证 url 是否“可下载”或具有经典的 cors 标头。不要忘记使用these 之类的服务器对其进行测试

如果您无法下载或遇到与您的 vue 应用相同的 cors 错误，您可以验证亚马逊不允许这种类型的音频网址使用。

还要验证亚马逊是否有一种允许我们注册来源的管理 Web 控制台。在这种情况下，您必须添加 localhost:8080 或运行您的 Web 应用程序的任何域。

解决方法

如果 url 可以在后端下载，我的意思是使用 java 而 不是使用 javascript，您可以创建一个简单的 spring 控制器来下载音频并返回您的字节或其他格式vue 应用需求。此时您是所有者，因此您可以添加所需的任何 CORS 标头。

Answer 2

尝试从请求中删除标头 const config = {headers: {'Access-Control-Allow-Origin': '*'}};

额外的标题只会混淆浏览器