JS发送POST请求到Flask服务端请求体未正常接收问题求助

问题根源 #

你代码里的mode: 'no-cors'配置是导致该问题的直接原因：

• Insomnia属于原生客户端，不受浏览器同源策略约束，不会自动修改你配置的请求头，所以请求可以正常解析；而浏览器端的请求受同源策略管控，mode: 'no-cors'模式下浏览器会自动过滤所有不在CORS安全允许列表内的请求头
• no-cors是专门为跨域请求不需要读取响应内容、且只发送符合简单请求规范的请求设计的，该模式下你设置的Content-Type: application/json不在允许范围内，会被浏览器自动修改为text/plain，请求头的自定义配置不会生效
• Flask的request.get_json()默认只会解析Content-Type为application/json的请求体，识别到请求头类型不对时就会返回None，和你传入的请求体内容本身无关

解决方案 #

1. 删除JS请求里的mode: 'no-cors'配置，fetch默认使用cors模式，该模式才支持自定义请求头和读取响应内容，修改后的JS代码如下：

const response = await fetch('http://myusername.pythonanywhere.com/', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            track: track
        })
    });

2. 服务端配置CORS跨域支持：
   首先安装flask-cors依赖：

   pip install flask-cors
   

   然后在你的Flask启动代码中添加跨域配置：

   from flask_cors import CORS
   from flask import Flask
   
   app = Flask(__name__)
   CORS(app) # 全局配置跨域允许所有来源，也可以根据需求配置指定域名
   
   # 下面保留你原来的路由代码即可
   

排查验证 #

如果修改后仍然有问题，可以在服务端先打印原始请求信息排查：

@app.route('/', methods=['POST'])
def handle_post():
    # 先打印原始请求头和请求体确认内容
    print(request.headers)
    print(request.data)
    req_data = request.get_json()
    # 原有逻辑不变

内容的提问来源于stack exchange，提问作者Zachary Khan