javascript - 使用 JS 和 Ajax 调用需要标头中的密钥的 API 时出现问题

Question

因为我想在 HTML 页面中显示 API 调用的结果，所以我在 Javascript 中使用 Ajax 从 API 中获取信息。

DEV API 不需要密钥，我已经能够得到结果（耶！）

            $.ajax({
            url: "https://api-dev.XXXXXXXXX.com/enterprise/123456/treeCount/2020-05",
            async: false,
            success: function(result){
                totalCount = totalCount + result.count;
            }
        }),

所以上面的代码可以正常工作。

不过，Prod API 需要在标头中有一个密钥，但我无法使其工作。在 StackOverflow 中找到了很多示例，但我所有的测试都失败了。

        $.ajax({
            url: "https://api.XXXXXXXXX.com/enterprise/123456/treeCount/2019-12",
            headers: { "x-api-key" : "12345678910" },               
            async: false,
            success: function(result){
                totalCount = totalCount + result.count;
            }
        })

在 Postman 中添加 x-api-key 和 key 的值时效果很好，所以我知道 key 是好的

知道我做错了什么吗？

谢谢！

---

编辑 2 月 15 日： 感谢您的回答。进入控制台，看到一些 CORS 错误，然后我添加了一些与 CORS 和 Content-Type 相关的信息，所以我在 JavaScript 中的新代码如下：

            $.ajax({
            url: "https://api.XXXXXXXXXX.com/enterprise/123456/treeCount/2019-12",
            headers: { "x-api-key" : "12345678910",
                   "Content-Type" : "application/json",
                  'Access-Control-Allow-Origin': '*' },             
            async: false,
            success: function(result){
                totalCount = totalCount + result.count;
            }
        })

但仍然收到相同的错误消息：

jquery-3.3.1.min.js:2 [弃用] 主线程上的同步 XMLHttpRequest 已弃用，因为它对最终用户的体验产生不利影响。如需更多帮助，请查看https://xhr.spec.whatwg.org/。jquery-3.3.1.min.js：2 从源“null”访问“ https://api.XXXXXXXXX.com/enterprise/123456/treeCount/2020-05 ”的 XMLHttpRequest 已被 CORS 策略阻止：响应预检请求未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。jquery-3.3.1.min.js:2 加载资源失败：net::ERR_FAILED

当 In 仅调用 Dev API（不需要 API 密钥）时，它可以正常工作，如上所示，并且我没有收到 CORS 错误。

再次感谢您的帮助。

标签： javascriptajaxapikey