时间戳

首页 > 解决方案 > 使用 JavaScript 调用 API 期间“CORS 标头‘Access-Control-Allow-Origin’缺失”

javascript - 使用 JavaScript 调用 API 期间“CORS 标头‘Access-Control-Allow-Origin’缺失”

问题描述

我知道之前有人问过这个问题，但我很难真正理解问题是什么或究竟如何解决它。我对 JavaScript 还很陌生，我正在尝试弄乱这个API。我首先只是尝试获取游戏的标题并在单击按钮时将其显示在控制台中。每当我单击该按钮时，在控制台中我都会收到“CORS 标头 'Access-Control-Allow-Origin' 缺失”以及“TypeError：尝试获取资源时的 NetworkError”。

脚本.js

function getGame() {
    fetch('https://zelda-api.apius.cc/api/games')
        .then(function (response) {
            return response.json();
        })
        .then(function(data) {
            // appendData(data);
            console.log(data)
        })
        .catch(function (err) {
            console.log('error: ' + err);
        });
}

我试过做一些变化，比如：

fetch('https://zelda-api.apius.cc/api/games'{
    mode: 'cors', 
    headers: {'Access-Control-Allow-Origin': '*'}
})

同样，我知道这不是一个新问题，但我无法根据我的情况调整所有其他答案。感谢您的帮助！

标签： javascriptapicorsfetchfetch-api

解决方案

如果你仔细检查浏览器的错误信息，你会发现你提到的 header 应该在响应header 中。这意味着，您无法从前端代码控制 CORS 规则。此机制用于保留 api 提供的重要信息只能从拥有正确 dns 的真实站点获取。您可以在此处查看有关此主题的更多详细信息

推荐阅读