使用 jQuery 调用 API 的 CORS 问题答案

【问题标题】：CORS issue with calling an API using jQuery使用 jQuery 调用 API 的 CORS 问题
【发布时间】：2019-09-16 11:39:53
【问题描述】：

我正在尝试调用 API，它返回 XML 数据作为响应。

当我在本地计算机上运行该 .htm 文件时，它给了我以下错误。

而且，当从codepen.io 平台运行它时，它给了我以下错误。

但是，当我从 Postman 或 JSON Formatter 调用 API 时，它会给出响应。当我简单地将它粘贴到浏览器中并按 Enter 键时，它也可以在那里工作。但不能使用我的代码。我不确定有什么问题。谁能帮帮我？

这是我的代码：

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>jQuery.parseXML demo</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>

<body>
    <p id="someElement">Hello</p>
    <p id="anotherElement"></p>

    <script>
        $(document).ready(function () {
            var api_url = 'http://lb.50g.nl/xml/29474bb065f2b30ca5eb3496f231bced.xml'

            $.ajax({
                url: api_url + $(this).text(),
                dataType: "xml",
                async: true,
                method: "GET",
                headers: {
                    "accept": "text/xml",
                    "Access-Control-Allow-Origin": "*"
                },
                crossDomain: true,
                success: function (result) {
                    console.log(result);
                }
            })
        });

    </script>
</body>

</html>

【问题讨论】：

仔细检查您在 postMan 中插入的数据类型，并将该数据类型与您在浏览器等中插入的数据进行比较。比较您会发现不同之处。

标签： javascript jquery ajax xml cors

【解决方案1】：

您所看到的与所谓的 CORS 有关。

本质上，您不能从其他服务器（域）请求资源，而不是提供您的文档的服务器。这是为了帮助降低 xSite 攻击的风险。

API 工作得很好，这就是邮递员获取数据的原因，实际上是浏览器禁止从您的文档中触发请求。

为了从与您所服务的域不同的域请求资源，您必须强制执行一些安全策略。

您可以查看answer 了解更多信息。

【讨论】：

这可能对我有帮助，但我不是专业开发人员。仍在弄清楚我到底要做什么。 :)
尝试按照我发布的链接上“Miracool”给出的答案，它应该可以让您从您的页面正常访问 API。如果不让我再次知道
是的，我试过了。得到同样的错误。我仍在试图弄清楚。 :)

【解决方案2】：

AWS 的 API Gateway 将全天帮助您解决这个问题。

当您运行 HTTP 请求时，最好从后端（使用 js/node）调用模块，这将帮助您解决 CORS 问题。但是，当您可以使用 AWS 时，为什么还要设置服务器/后端。

通过一些额外的步骤，您可以创建一个传递请求的 API，然后从您的浏览器调用该 API，它将向您的页面发送允许跨域的响应。

在这里查看我的答案：

How to retrieve cross origin volcanic data in xml?

【讨论】：

【解决方案3】：

我完全同意MKougiouris。由于Cross-Origin Resource Sharing (CORS)，您会收到错误消息。所以你的后端拒绝任何来自不同来源的API 呼叫，例如server。 CORS 帮助您限制对来自指定来源的某些资源的访问。但是，如果您是管理后端的人，则可以使用此代码来访问所有来源。 header("Access-Control-Allow-Headers", "*")。但这适用于我的节点项目。

app.all('*', function(req, res, next) {
  var origin = req.get('origin'); 
  res.header('Access-Control-Allow-Origin', origin);
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  next();
})

注意：如果您正在从事机密项目，则应限制访问权限，但上述内容允许所有人访问。

【讨论】：