为什么Flask API某端点出现CORS错误但其余同逻辑端点正常？

问题根因 #

你触发错误的端点路由定义是@bp.route('<primary_type>/')，末尾带了斜杠，而你前端请求的地址是http://127.0.0.1:5000/api/v0.1.0/infrastructure/railroads，末尾没有斜杠。
Flask默认的路由规则里，对于定义时带末尾斜杠的路由，如果收到不带斜杠的请求，会自动返回301重定向响应，跳转到带末尾斜杠的地址。但这个301响应是Flask框架自动生成的，没有走你写的端点代码里添加Access-Control-Allow-Origin头的逻辑，所以浏览器拿到没有CORS头的301响应就会直接抛出CORS错误，根本不会走到实际的端点执行逻辑。

可行解决方案 #

方案1：统一前后端的路径格式 #

• 要么修改前端请求地址，末尾加上斜杠，比如把http://127.0.0.1:5000/api/v0.1.0/infrastructure/railroads改成http://127.0.0.1:5000/api/v0.1.0/infrastructure/railroads/
• 要么修改Flask端点的路由定义，去掉末尾斜杠，改成@bp.route('<primary_type>')，和你正常工作的端点路由格式保持一致

方案2：全局配置Flask关闭严格斜杠匹配 #

如果你不想逐个调整路由，可以在创建Flask应用或者蓝图的时候关闭严格斜杠检查，这样带不带斜杠的请求都能匹配到同一个端点：

# 如果是全局应用配置
app = Flask(__name__)
app.url_map.strict_slashes = False

# 如果是蓝图配置
bp = Blueprint('your_bp_name', __name__, strict_slashes=False)

方案3：给全局响应添加CORS头 #

如果需要保留严格斜杠匹配的规则，可以通过Flask的after_request钩子给所有响应统一添加CORS头，包括框架自动生成的301重定向响应，同时也能避免你在每个端点里重复写添加响应头的代码，更易维护：

@app.after_request
def add_cors_headers(response):
    response.headers.add("Access-Control-Allow-Origin", "*")
    # 如果有自定义请求头或者跨域Cookie需求，还可以补充其他CORS相关头
    # response.headers.add("Access-Control-Allow-Methods", "GET, POST, OPTIONS")
    # response.headers.add("Access-Control-Allow-Headers", "Content-Type")
    return response

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