cURL 有效，但 XMLHttpRequest 无效？答案

【问题标题】：cURL works but XMLHttpRequest does not?cURL 有效，但 XMLHttpRequest 无效？
【发布时间】：2019-05-13 11:55:44
【问题描述】：

从终端进行此调用有效：

curl -d "username=test&password=test" -X POST http://127.0.0.1:5000/login/

但在我的 Chrome 扩展程序中，Ajax 调用失败，状态为 0。我尝试了很多方法，但都没有运气。

function doLogin() {
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    var params = 'username=' + username + '&password=' + password;

    sendPostRequest("http://127.0.0.1:5000/login/", params);
}

function sendPostRequest(url, params) {
    var http = new XMLHttpRequest();
    http.open('POST', url, true);
    http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

    http.onreadystatechange = function () {
        // This is never called
        if (this.readyState == 4 && this.status == 200) {
            alert(http.status);
        }
    };

    http.send(params);
}

服务器端：

@app.route("/login/", methods=['POST'])
def login():
    username = request.form["username"]
    password = request.form["password"]

    auth = authenticate(username, password)

    return jsonify({'authentication': auth}), 200

我将不胜感激。

【问题讨论】：

您在控制台中遇到的错误是什么？
XMLHtttpRequest 返回状态 0
检查您的控制台，必须记录错误。

标签： javascript flask xmlhttprequest

【解决方案1】：

我已经重新创建了场景。如果你想从templates文件夹外访问login路由，你需要允许CORS。

我已安装flask-cors 并允许所有来源。如有必要，您可以将其更改为特定的 login 路由。包的文档可以在in this documentation link找到。

文件夹结构：

├── app.py
├── extension.html
└── requirements.txt

requirements.txt:

Click==7.0
Flask==1.0.2
Flask-Cors==3.0.7
itsdangerous==1.1.0
Jinja2==2.10.1
MarkupSafe==1.1.1
pkg-resources==0.0.0
six==1.12.0
Werkzeug==0.15.2

app.py:

from flask import Flask, request, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

def authenticate(username, password):
    if username == "test" and password == "test":
        return True
    return False

@app.route("/login/", methods=['POST'])
def login():
    username = request.form["username"]
    password = request.form["password"]
    auth = authenticate(username, password)
    return jsonify({'authentication': auth}), 200

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000)

extension.html:

<html>
<head>
  <title>Chrome Extension Login</title>
</head>
<body>
  <div>
    Username: <input type="text" id="username" /> <br>
    Password: <input type="text" id="password" /> <br>
    <button id="login_button">Login</button>
  </div>
  <script type="text/javascript">
  function doLogin() {
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    var params = 'username=' + username + '&password=' + password;
    sendPostRequest("http://127.0.0.1:5000/login/", params);
  }
  function sendPostRequest(url, params) {
    var http = new XMLHttpRequest();
    http.open('POST', url, true);
    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    http.onreadystatechange = function () {
      if (this.readyState == 4 && this.status == 200) {
        console.log(this.status);
        console.log(this.responseText);
      }
    };
    http.send(params);
  }
  var login_button = document.getElementById("login_button");
  login_button.addEventListener("click", doLogin);
  </script>
</body>
</html>

输出：

CURL 请求：

使用正确的凭据成功登录：

使用错误凭据登录时出错：

【讨论】：

谢谢！我错过了 CORS