为什么CORS给出的结果不一致当来自同一个Python应用程序的2个api从相同的源javascript调用时
我有一个python烧瓶api应用程序，如下所示。
from flask import Flask, jsonify, request
from flask_cors import CORS, cross_origin
# creating a Flask app
app = Flask(__name__)
CORS(app,origins = ['*'],send_wildcard = True)
@app.route('/getapi', methods = ['GET'])
def api1 ():
return ({"text": "Hello World"})
@app.route('/putapi', methods = ['PUT'])
def api2():
formtext = request.form.get("inputtext")
return ({"text": formtext})
# driver function
if __name__ == '__main__':
app.run(debug = True)我在HTML页面中有一个Javascript，如下所示
async function getText() {
const api_url = "http://127.0.0.1:5000/getapi";
const api_req = new Request(api_url);
api_req.method = "GET";
const response = await fetch(api_req);
const data = await response.json();
console.log(data);
}
async function putText() {
const api_url = "http://127.0.0.1:5000/putapi";
const api_req = new Request(api_url);
const requestOptions = {
method: "PUT",
headers: { "Content-Type": "multipart/form-data" },
};
const formData = new FormData();
formData.append("inputtext", "new text from browser");
api_req.formData = formData;
const response = await fetch(api_req, requestOptions);
const data = await response.json();
console.log(data);
}该网页使用VSCode中的实时服务器扩展运行，并以http://127.0.0.1:5500/的形式运行。烧瓶API以http://127.0.0.1:5000的形式运行。
当我调用getapi时，没有CORS错误。但是，当脚本调用putapi时，控制台中会出现CORS错误。
访问从源“http://127.0.0.1:5000/putapi”获取'http://127.0.0.1:5500‘已被CORS策略阻止:请求的资源上没有“访问控制-允许-原产地”标题。如果不透明响应满足您的需要，请将请求的模式设置为“no- CORS”，以获取禁用CORS的资源。
为什么这种不一致的行为？我也尝试过改变方法以获取而不是PUT。还是同样的错误。在HTML中，getapi在body onload上被称为第一个。在一个按钮点击，普塔皮被称为。
回答 1
Stack Overflow用户
发布于 2022-10-04 00:37:28
你没有发送任何请求体。您的PUT请求格式错误，这可能导致烧瓶响应错误，绕过CORS配置。
若要正确发送带有PUT有效负载的multipart/form-data请求，请使用下列.
async function putText() {
const api_url = "http://127.0.0.1:5000/putapi";
const formData = new FormData();
formData.append("inputtext", "new text from browser");
const response = await fetch(api_url, {
method: "PUT",
body: formData,
});
const data = await response.json();
console.log(data);
}将请求body设置为FormData实例时，在从浏览器发送时会自动设置适当的内容类型标头。
由于您没有发送任何二进制数据，所以您实际上不需要FormData。您可以使用URLSearchParams发送一个application/x-www-form-urlencoded主体。
const response = await fetch(api_url, {
method: "PUT",
body: new URLSearchParams({ inputtext: "new text from browser" }),
});甚至只需要自己格式化有效负载，但是还需要提供内容类型的标题。
const response = await fetch(api_url, {
method: "PUT",
body: `inputtext=${encodeURIComponent("new text from browser")}`,
headers: {
"content-type": "application/x-www-form-urlencoded",
},
};https://stackoverflow.com/questions/73941833
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号