XHR 响应不断被取消答案

【问题标题】：XHR response keeps getting cancelledXHR 响应不断被取消
【发布时间】：2021-05-23 16:47:21
【问题描述】：

我有一个 HTML 表单：

<form id="form_id" method="post">
  <label>First Name :</label>
  
  <input type="text" name="firstname" id="Adam">
  <label>Last Name :</label>
  <input type="text" name="lastname" id="Albert">
  
  <input type="submit" name="create_customer" id="btn_next" value="Next" onclick="next(btn_next.name)">
</form>

我用于 onclick 操作的 JavaScript：

function next(contextID) {
console.log("I am in ");
  document.getElementById('form_id').addEventListener('submit', (event) => {
    event.preventDefault(); 
   console.log("executed default ");
    var fname = document.getElementById("fname").value;
    var lname = document.getElementById("lname").value;
    var params = {"fname": fname, "lname": lname, "contextID": contextID}
    console.log("PRINT -> value of params: "+ JSON.stringify(params))

    document.getElementById("form_id").submit(); //form submission

    var xhr = new XMLHttpRequest();
    var url = "http://XXX.X.X.X:XXXX/routecontrol";
    xhr.open("POST", url, true);
    xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
     console.log("calling API ");
    xhr.send(JSON.stringify(params));
    console.log("Response is "+xhr.status);
 });
}

我的烧瓶 API：

@app.route('/routecontrol', methods=['POST'])
#@cross_origin(origin='*')
def post():
    
    content = request.data
    dict_str = content.decode("UTF-8")
    dataObj = ast.literal_eval(dict_str)
   
    nextRoute = dataObj['contextID']
    
    if nextRoute == "create_customer":

        headers = {'content-type': 'application/json', 'Access-Control-Allow-Headers': 'Authorization', 'Access-Control-Allow-Headers':'Origin, X-Requested-With, Content-Type, Accept', 'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE' }
        url = 'http://XXX.X.X.X:XXXX/createCustomer'
        
        response = requests.post(url, data=request.data, headers=headers)
        response.headers['Access-Control-Allow-Origin'] = '*'
        response.headers['Access-Control-Allow-Headers'] = 'Authorization, Origin, X-Requested-With, Content-Type, Accept'
        response.headers['Access-Control-Allow-Methods'] = 'GET, POST, PUT, DELETE'

        print("headers", response.headers)
        print("headers", response.status_code)
        print("headers", response.text)
        print("this is the return ", response.content)
    
    return response

API 的“响应”有数据（我在 Flask 日志中打印出来），但它永远不会返回到我的 javascript 函数。我在 DevTools 中不断收到“XHR 已取消”错误。在我的 JavaScript 中记录 xhr.status 的控制台显示 0。我不确定是什么原因造成的，因为我无法在 DevTools 中对其进行更深入的调试。任何帮助将不胜感激。

【问题讨论】：

标签： python api xmlhttprequest response

【解决方案1】：

对于因类似问题而发现此问题的任何人，解决此问题的方法是在我的 xhr.open 调用中将身份验证所需标志从 true 更改为 false。我完全使用笔记本电脑和 Flask 开箱即用的基本 Flask Web 服务器工作。

【讨论】：