时间戳

首页 > 解决方案 > XMLHttpRequest 调用不返回任何内容

javascript - XMLHttpRequest 调用不返回任何内容

问题描述

我正在制作一个网站，当按下网站上的按钮时，该网站需要对 python 脚本（在第三方网站上）进行 XMLHttpRequest 调用。然后，python 脚本将对数据进行更改，并将其返回给网站。

如果我调用现有的 API 测试器，例如：https ://reqres.in/api/users?page=2

但是，当我调用托管在我的网站上的自己的 python 脚本时，它不起作用。

这是托管在我的网站上的 python 脚本的代码https://example.com：

from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/')
def testing():
    return jsonify(test="Hello")

if __name__ == '__main__':
    app.run()

...这是旨在从上述python脚本中获取数据的代码。

var myRequest = new XMLHttpRequest();

myRequest.open('GET', 'https://example.com');

myRequest.onreadystatechange = function () { 
    if (myRequest.readyState === 4) {
        alert(myRequest.responseText);
    }
}

document.getElementById("myButton").addEventListener("click", 
    function() {
        myRequest.send();
    }
);

如前所述，如果我使用已建立的 API 示例，例如https://reqres.in/api/users?page=2而不是https://example.com那么它可以正常工作，所以我确定这是 python 脚本的问题，但我只是无法弄清楚是什么，因为没有错误消息。

标签： javascriptpythonapixmlhttprequest

解决方案

这似乎是一个 CORS 问题。当从服务器 A 加载的网页向服务器 B 发送请求（通过 XMLHttpRequest）时，我们将面临跨域资源共享 (CORS) 场景。这种请求必须满足某些要求（如https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS所述）。

长话短说，服务器 B（此处为 example.com）必须在其响应中提供额外的标头：

Access-Control-Allow-Origin: http://server-a-domain.com

以下也OK。顺便说一句，这就是您的示例服务器 regres.in 返回的内容。

Access-Control-Allow-Origin: *

如果您使用的是 Flask，请查看似乎提供通用解决方案的 Flask-CORS：https ://flask-cors.readthedocs.io/en/latest/

推荐阅读