XHR 响应不断被取消

Question

我有一个 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>

我的 JavaScript 用于 onclick 操作：

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);
 });
}

我的 flask 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 function。 我在 DevTools 中不断收到“XHR 已取消”错误。 在我的 JavaScript 中记录 xhr.status 的控制台显示为 0。我不确定是什么原因造成的，因为我无法在 DevTools 中对其进行更深入的调试。 任何帮助，将不胜感激。

Answer 1

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