javascript - 即使在从 FLASK 请求数据时处理 cors 后,获取 Api 也会给出不透明的响应
问题描述
尝试了一切,但没有得到回应!我找不到我错在哪里!
我在获取请求时遇到问题。它与 FLASK localhost 无法正常工作。我提出了一个简单的获取请求,但我得到的只是登录控制台时的不透明响应。不过,只需通过 api 端点,我就能看到响应。
.py(烧瓶本地主机)
from flask import Flask, render_template, request, jsonify
from flask_cors import CORS, cross_origin
app = Flask(__name__)
@app.route('/findHotels',methods = ['GET','POST'])
@cross_origin()
def findHotelsHelper():
if request.method == 'GET':
response = jsonify(message="Simple server is running")
response.headers.add("Access-Control-Allow-Origin", "*")
return response
if __name__ == '__main__':
app.run(debug = True)
以下是使用 fetch api 请求数据的 html 代码
<!DOCTYPE html>
<html>
<body>
<h1>Find Nearest Hotels in your Area! </h1>
<form id="form1" action="http://localhost:5000/findHotels" method="GET">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br><br>
<input type="button" onclick="loadDoc()" value = "GO">
</form>
<p id="demo"></p>
<script>
async function loadDoc(){
await fetch('http://127.0.0.1:5000/findHotels', { method: 'GET', mode:'no-cors'})
.then(function (response) {
console.log(response);
return response;
}).then(function (text) {
console.log('GET response:');
console.log(text);
});
}
</script>
</body>
</html>
任何建议将不胜感激。PS对不起,我是堆栈溢出的新手,请原谅这段时间没有遵循适当的帖子规则。 显示工作获取请求 的图像 如果使用 fetch api,图像显示失败/(变得不透明)请求 另外我想指出,简单的表单也可以正常工作,我能够检索 json 数据,但我想在没有它的情况下执行它并且仅使用 JS。
解决方案
Ajax 请求正在发送一个POST
请求,因此您应该更改 Python 代码的部分以匹配该方法。
from flask import Flask, render_template, request, jsonify
from flask_cors import CORS, cross_origin
app = Flask(__name__)
@app.route( '/findHotels', methods = ['GET','POST'] )
@cross_origin()
def findHotelsHelper():
if request.method == 'POST':
response = jsonify(message="Simple server is running")
response.headers.add("Access-Control-Allow-Origin", "*")
return response
if __name__ == '__main__':
app.run(debug = True)
假设 Python 代码正在发送纯文本作为响应,那么在fetch
调用链中,您应该返回文本值 - 即:response.text()
<form name='search' action='http://localhost:5000/findHotels' method='GET'>
First name: <input type='text' name='fname'><br>
Last name: <input type='text' name='lname'><br><br>
<input type='button' value='GO' />
</form>
<p id='demo'></p>
<script>
async function loadDoc(e){
await fetch( oForm.action, { method: 'POST', mode:'no-cors' })
.then( r=>r.text() ) // return the `text()` property
.then( text=>{
console.log('GET response:%s',text);
})
}
let oForm=document.forms.search;
let oBttn=oForm.querySelector('input[type="button"]');
oBttn.addEventListener('click',loadDoc);
</script>
没有 Python 来测试我很快就敲出了上面的 PHP 版本。这工作得很好,所以问题可能出在 Python 代码上?!
<?php
if( $_SERVER['REQUEST_METHOD']=='POST' ){
ob_clean();
header('Access-Control-Allow-Origin','*');
$message="Simple server is running";
exit($message);
}
?>
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title></title>
<script>
document.addEventListener('DOMContentLoaded',(e)=>{
async function loadDoc(e){
await fetch( oForm.action, { method:'POST', mode:'no-cors' })
.then( r=>r.text() ) // return the `text()` property
.then( text=>{
console.log('POST response:%s',text);
alert( text )
})
}
let oForm=document.forms.search;
let oBttn=oForm.querySelector('input[type="button"]');
oBttn.addEventListener('click',loadDoc);
})
</script>
</head>
<body>
<form name='search' method='GET' action=''>
First name: <input type='text' name='fname' />
Last name: <input type='text' name='lname' />
<input type='button' value='GO' />
</form>
</body>
</html>