使用jQuery調用API的CORS問題

Question

我正在嘗試調用一個API ，該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 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，並在該瀏覽器中向您的頁面發送跨域允許的響應。

在這里查看我的答案：

如何在xml中檢索跨源火山數據？

使用jQuery調用API的CORS問題

問題描述

3 個解決方案

解決方案1
3 2019-09-16 11:46:53

解決方案2
1 2019-09-16 14:39:36

解決方案3
1 已采納 2019-09-16 17:30:41

使用jQuery調用API的CORS問題

問題描述

3 個解決方案

解決方案1 3 2019-09-16 11:46:53

解決方案2 1 2019-09-16 14:39:36

解決方案3 1 已采納 2019-09-16 17:30:41

解決方案1
3 2019-09-16 11:46:53

解決方案2
1 2019-09-16 14:39:36

解決方案3
1 已采納 2019-09-16 17:30:41