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

Posted 2023-03-04

【中文标题】使用 JavaScript 调用 API 期间“缺少 CORS 标头‘Access-Control-Allow-Origin’”

【英文标题】："CORS header ‘Access-Control-Allow-Origin’ missing" during API call with JavaScript

【发布时间】：2021-05-27 11:44:26

【问题描述】：

我知道以前有人问过这个问题，但我无法真正理解问题是什么或确切地解决问题的方法。我对 javascript 相当陌生，我正在尝试使用 this API。我首先只是尝试获取游戏的标题并在单击按钮时将其显示在控制台中。每当我单击该按钮时，在控制台中我都会收到“CORS 标头‘Access-Control-Allow-Origin’缺失”以及“TypeError：尝试获取资源时出现 NetworkError”。

scripts.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': '*'
)

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

【问题讨论】：

服务器端需要添加CORS头

当我们请求相同的 api 调用时，它说它被 API 阻止了，所以你必须在服务器级别启用 cors

我们在同一个站点发送数据时正在获取数据

【参考方案1】：

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

【讨论】：

好吧，对不起，如果这是一个愚蠢的问题，但这是否意味着我必须设置节点服务器或其他东西并在那里定义标头？

或者这是 API 的创建者必须做的事情？

您可以选择一些选项来解决此问题，是的，设置转发服务器是一种常用方法。后端服务器（由 nodejs 或任何其他编程语言制作）可以从源站点获取资源，然后将源响应转发到您的前端。 @TheInternetDani