我在 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]
引用链接:
Why is AJAX returning HTTP status code 0?
XMLHttpRequest status 0 (responseText is empty)
但没能解决问题
我也尝试过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 中的代码以使此功能正常工作？
最佳答案
我能够通过将以下行添加到 python Rest API 来解决这个问题。
pip install -U Flask-cors
from flask_cors import CORS
cors = CORS(app)
关于javascript - 单击 html 按钮时使用 javascript 将 json 数据发送到托管的 python Flask api，并在 HTML 标签上打印 API 的响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60918799/