当从同一个Origin javascript调用来自同一个Python Flask api应用程序的2个APIS时，为什

Question

我有一个python flask 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/.Flask 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策略阻止：请求的资源上不存在"Access Control Allow Origin"标头。如果不透明响应满足您的需求，请将请求的模式设置为"无cors"，以在禁用cors的情况下获取资源。

为什么会出现这种不一致的行为？我还尝试将方法更改为GET，而不是PUT。还是同样的错误。在HTML中，getapi是在body onload时首先调用的。点击按钮，就会调用putapi。

Answer 1

您没有发送任何请求正文。您的PUT请求格式不正确，这可能导致Flask绕过CORS配置以错误响应。

要正确发送带有multipart/form-data有效载荷的PUT请求，请使用以下。。。

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",
},
};