在 html 按鈕上使用 javascript 將 json 數據發送到托管的 python flask api 單擊並在 HTML 標簽上打印來自 API 的響應

Question

我在 pythonanywhere 上托管了一個 python flask api。 它接受 json 輸入，執行一些操作並以 json 格式返回響應。

我有一個網站試圖調用這個 API 並且應該顯示響應。

按鈕單擊調用 javascript 函數 apicall()。

HTML代碼：

<button type="submit" name = "submit" id = "submit" onclick="apicall()">Check</button>
<label id="response"></label>

Javascript 函數（它嘗試將標簽文本設置為響應文本）：

<script type="text/javascript">
function apicall(){ 

  xmlObj = new XMLHttpRequest(); //suddenly global scope
  xmlObj.open("POST","http://abc.pythonanywhere.com/xyz",true);
  xmlObj.setRequestHeader("Content-Type", "application/json");
  var website=document.getElementById("url").value;
  var data = JSON.stringify({"url": website});
  xmlObj.send(data);
  xmlObj.onreadystatechange = handleRequestStateChange();
  function handleRequestStateChange(){  
  alert("here");
  if(xmlObj.readyState == 4 && xmlObj.status==200){
    var json = JSON.parse(xmlObj.responseText);
    document.getElementById("response").innerHTML =json.prediction;
    alert("if loaded");
  }
  else
  {
      alert(xmlObj.status);
  }
 }
}
</script>

但是，它會警告狀態 0。

控制台上打印的錯誤說：“[CORS]源在http://abc.pythonanywhere.com/xyz 的跨源資源請求標頭中的 access-control-allow-origin 中找不到源”

開發人員工具中的網絡選項卡顯示了在任何地方與 python 的連接以及 200[ok] 的響應代碼

參考鏈接：

為什么 AJAX 返回 HTTP 狀態代碼 0？

XMLHttpRequest 狀態 0（響應文本為空）

但無法解決問題

我也試過 jquery 做同樣的事情

<script>
        $(document).ready( function() {
        $('#submit').click(function() {
           var website=document.getElementById("url").value;
           $.ajax({
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(website),
                dataType: 'json',
                url: 'http://abc.pythonanywhere.com/xyz',
                success: function (e) {
                   alert(e);
                   console.log(e);
                   window.location = "https://www.google.com"
                },
                error: function(error) {
                console.log(error);
            }
            });
        });
  });
</script>

但是當我單擊該按鈕時，jquery 代碼只是重新加載頁面而沒有任何錯誤（或者錯誤日志和網絡日志可能只是因為重新加載而清除）。

如何允許 python API 上的跨源請求，或者如何更改 javascript 或 jquery 中的代碼以使這件事起作用？

Answer 1

通過將以下幾行添加到 python rest API，我能夠解決這個問題。

pip install -U flask-cors

from flask_cors import CORS
cors = CORS(app)