如何解决CORS(访问控制允许来源)和CORB的问题，同时将FETCH与Vanilla Javascript一起使用

Question

我正在尝试使用另一个网站上的简单 JSON 文件中的值更新我网站中的一行文本。这是一个与我在堆栈上看到的问题略有不同的问题 - 原因是我不能使用JQuery(这是一个学校项目(，而且我不应该使用任何后端的东西，如Node/PHP/Angular/等。我想知道它是否可以用香草javascript完成？

我尝试了几种不同的方法，以下内容得到了我想要的，但我不得不使用 chrome 扩展名(允许 CORS(来解决 CORS 错误：

let url1 = "https://www.codewars.com/api/v1/users/jrd656"
let h = new Headers();
h.append('Accept', 'application/json');
let req = new Request(url1, {
method: 'GET',
headers: h,
mode: 'cors',
});
fetch(req)
.then((response)=>{
if(response.ok){
return response.json();
}else{
throw new Error('BAD HTTP stuff');
}
})
.then( (jsonData) =>{
console.log(jsonData);
})
.catch( (err) =>{
console.log('ERROR:', err.message);
});

chrome 扩展程序只能解决我的浏览器的问题，我希望它适用于所有浏览器。我知道我可以使用代理，但这需要我学习一些后端 php/Node/etc，如果可能的话，我想避免这种情况。

我相信有一种方法可以通过以下方式克服CORS问题：Access-Control-Allow-Origin: *;，但是当我将其粘贴到我的.js文件中时，它不起作用，并且我的浏览器给了我一个错误Uncaught SyntaxError: Unexpected token ':'。

Answer 1

我找不到解决我的特定问题的方法(我认为它不存在(。我最终按照这里的说明解决了这个问题： 请求的资源上不存在"访问控制允许源"标头 - 尝试从 REST API 获取数据时

它涉及花费 10 分钟克隆一个 heroku 应用程序，该应用程序充当代理来处理我需要的数据。

希望任何有相同问题的人都可以阅读本文，这将节省他们的时间。我花了(字面意思(几天试图弄清楚这一点，所以如果你已经到达这里，我会做上面的链接，省去更多的试验和错误。