VueJS部署应用CORS错误

Question

在我看来，这个问题相当有趣。因此，在我的本地环境中，我正在执行对API的获取GET请求而没有任何问题：

fetch("https://api.com")
            .then((res) => res.json())
            .then((data) => { console.log(data)});

但是当我在服务器上部署项目时，在使用Chrome访问网站时出现此错误：

  

'Access-Control-Allow-Origin'标头有一个值   'http://localhost:8080'不等于提供的原点。   因此，不允许原点X访问。

然后我尝试使用axios HTTP库而不是Javascript Fetch API，然后它开始在Firefox中工作但在Chrome中仍然出现相同的错误。

我很困惑为什么这不起作用，我甚至试图创建一个有效的codepen。然后我创建了一个小提琴，它给了我这个错误（更改库使它也适用于jsfiddle）：

  

'Access-Control-Allow-Origin'标头有一个值   'https://s.codepen.io'不等于提供的原点。   因此，不允许原点“https://fiddle.jshell.net”访问。   让服务器发送带有效值的标头，或者，如果是不透明的   响应满足您的需求，将请求的模式设置为'no-cors'   在禁用CORS的情况下获取资源。

我试图将模式更改为'cors'或'no-cors'。在部署使用简单http get请求的VueJS项目时，任何人都有类似的随机混淆CORS错误问题吗？