CORS跨域请求拦截问题求助：Flask后端+JS前端配置排查

核心问题分析 #

你遇到的No 'Access-Control-Allow-Origin' header is present错误，本质是浏览器的CORS策略要求后端返回特定响应头，而当前后端配置未满足要求，同时前端存在错误的请求头设置。

前端代码的错误点 #

前端请求中添加'Access-Control-Allow-Origin':'*'是完全无效的——这个头是后端返回给浏览器的响应头，不是前端发送请求时需要携带的，反而可能触发额外的预检请求干扰正常流程。另外，设置mode:"no-cors"会让请求变成opaque类型，无法读取后端返回的JSON数据，属于无效的规避手段。

修正后的前端代码

export async function auth(username, password){
    const api_url_auth = `http://127.0.0.1:5000/login/${username}/${password}`;

    const response = await fetch(api_url_auth,{
        method: "POST",
        // 若后端允许携带凭证（如Cookie），添加此行；否则可省略
        credentials: 'include'
    });

    const data = await response.json();
    return data;
}

后端Flask配置的问题 #

你使用了@cross_origin(supports_credentials=True)但未指定允许的前端源，同时全局CORS(myAPI)可能和路由级装饰器产生冲突，导致CORS头未正确返回。

方案1：全局CORS配置（推荐）

移除路由上的@cross_origin装饰器，统一在全局配置CORS，明确指定允许的前端域名（带凭证的请求不支持*通配符）：

from flask import Flask, jsonify
from flask_cors import CORS

beapi = Flask(__name__)
# 替换为你的前端实际域名+端口，比如http://localhost:3000
CORS(beapi, origins="http://localhost:3000", supports_credentials=True)

@beapi.route("/login/<username>/<password>", methods=['POST'])
def login(username, password):
    global userdetails, account_id
    userdetails = database.get_Account_LogIn_Details(username)
    
    if userdetails != "e0101db":
        databasepwr = userdetails[2]
        account_id = userdetails[0]
        pwr = password
        if pwr == databasepwr:
            database.update_Time_In(account_id=account_id, date=date, time=time )
            return jsonify({"response": "True"})
        else:
            return jsonify({"response": "False"})
    else:
        return jsonify({"response": "NF"})

方案2：路由级CORS配置

若坚持使用路由装饰器，需明确指定允许的前端源：

from flask_cors import cross_origin

@beapi.route("/login/<username>/<password>", methods=['POST'])
# 替换为你的前端实际域名+端口
@cross_origin(origins="http://localhost:3000", supports_credentials=True)
def login(username, password):
    # 原有业务代码...

额外排查点 #

1. 确认flask-cors已正确安装：执行pip install flask-cors
2. 打开浏览器开发者工具的Network面板，查看OPTIONS预检请求的响应头，确认是否包含Access-Control-Allow-Origin、Access-Control-Allow-Credentials等必要头
3. 确保前端运行的域名/端口与后端配置的origins完全一致（比如前端是http://127.0.0.1:8080就不能写成http://localhost:8080）

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