Question

我正在尝试调用一个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>

Answer 1

您看到的与CORS有关。

从本质上讲，除提供文档的服务器（域）外，不允许您从其他服务器（域）请求资源。这是为了减轻xSite攻击的风险。

API运行良好，这就是为什么邮递员为您获取数据的原因，实际上是浏览器禁止从文档中触发请求。

要从与您服务的域不同的域中请求资源，必须执行一些安全策略。

您可以在answer中查看更多信息。

Answer 2

我完全同意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();
})

注意：如果您正在处理一个机密项目，则应限制访问权限，但以上内容可以访问所有内容。

Answer 3

AWS的API网关将全天为您解决这一问题。

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

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

在这里查看我的答案：

How to retrieve cross origin volcanic data in xml?

使用jQuery调用API的CORS问题

3 个答案: