仅POST请求触发CORS策略错误？求排查与解决方法

1. 修复前端Axios POST请求的参数格式错误 #

你的Axios POST写法存在格式错误：axios.post的第二个参数是请求体数据，第三个参数才是包含headers的配置对象。当前写法会把headers和data都当成请求体发送，导致请求格式异常，可能触发后端错误或重定向。

修改后的代码：

var headers: Headers = {
    'Content-Type': 'application/json; charset=utf-8'
}

export const GET = (url:string) => {
    return axios.get(`${url}`, { headers });
};

export const POST = (url:string, data:any) => {
    // 正确写法：第二个参数是data，第三个是配置对象
    return axios.post(`${url}`, data, { headers });
};

2. 修复FastAPI请求Flask时的POST参数传递错误 #

你的CreateHTTPRequest.post方法使用data=data参数，但requests.post的data参数会以application/x-www-form-urlencoded格式发送数据，而你设置的headers声明为application/json，这会导致Flask无法正确解析请求体，进而返回错误或触发重定向。应改用json=data参数，让requests自动将数据序列化为JSON格式。

修改后的代码：

def post(self, path, data=None, params=None):
    url = self.base_url + path
    # 替换data=data为json=data
    response = request("POST", url, json=data, headers=self.headers, params=params)
    response.raise_for_status()
    return response.json()

3. 解决Flask API的重定向问题 #

错误提示明确指出**"Redirect is not allowed for a preflight request"**，说明FastAPI请求Flask时触发了3xx重定向，而浏览器的preflight（OPTIONS）请求不允许跟随重定向。

常见重定向原因及解决方法：

• 路由路径斜杠不一致：比如Flask路由定义为@app.route("/group-classifier")，但FastAPI请求的是/group-classifier/（末尾带斜杠），Flask会自动重定向。需统一路由和请求的路径格式（要么都带斜杠，要么都不带）。
• 路径拼接错误：如果cnf.API_SERVER_HOST末尾带斜杠，而path开头也带斜杠，拼接后会出现重复斜杠（如http://api-server//group-classifier），触发重定向。改用urljoin安全拼接路径：

from urllib.parse import urljoin

# 在get和post方法中替换手动拼接
url = urljoin(self.base_url, path)

4. 确认Flask的CORS配置覆盖OPTIONS请求 #

虽然你设置了CORS(app)，但可显式配置CORS规则，确保preflight请求被正确处理：

# 替换原CORS(app)为更明确的配置
CORS(app, resources={r"/*": {"origins": "*", "methods": ["GET", "POST", "OPTIONS"], "allow_headers": "*"}})

总结 #

按顺序执行以下步骤即可解决问题：

1. 修复前端Axios POST的参数格式
2. 修复FastAPI请求Flask时的POST参数传递方式
3. 解决路径拼接导致的重定向问题
4. 确保Flask的CORS正确处理OPTIONS请求

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