使用Flask-Cors后仍出现CORS错误的技术求助

问题场景 #

学习Flask后端开发时，创建返回JSON数据的路由后遇到CORS错误，当前使用ngrok进行隧道转发，前端通过fetch请求接口。

Flask后端代码（main.py） #

from flask import Flask, jsonify
from flask_cors import CORS

app = Flask(__name__)

CORS(app)

@app.route('/')
def hello():
    return 'Hello'

@app.route('/test')
def about():
    return jsonify({'key_one':'some testing value'})

if __name__ == "__main__":
    app.run()

前端JavaScript代码（main.js） #

console.log("hello");

fetch("https://link.ngrok.io/test")
  .then((x) => x.json())
  .then((r) => console.log(r))
  .catch((e) => console.log(e));

前端HTML代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/style.css" rel="stylesheet">
    <script defer src='main.js'>
      
    </script>
  </head>
  <body>
    
  </body>
</html>

错误截图 #

解决步骤 #

• 核对ngrok转发地址：每次启动ngrok都会生成新地址，确保fetch里的地址是当前ngrok控制台显示的有效地址，别用旧地址。
• 优化CORS配置：全局配置可能存在匹配问题，给目标路由单独添加CORS装饰器，或者精准指定允许的资源：

  # 方式1：给单个路由加CORS
  from flask_cors import cross_origin
  
  @app.route('/test')
  @cross_origin()
  def about():
      return jsonify({'key_one':'some testing value'})
  
  # 方式2：全局配置指定资源
  CORS(app, resources={r"/test": {"origins": "*"}})
  

• 匹配Flask与ngrok端口：Flask默认跑在5000端口，启动ngrok时要对应转发这个端口（ngrok http 5000），如果Flask改了端口，ngrok命令也要同步修改。
• 清除浏览器缓存：浏览器可能缓存旧的CORS规则，强制刷新页面（Ctrl+Shift+R）或用无痕模式测试。
• 重新安装依赖：确保flask-cors版本兼容，执行以下命令重装：

  pip uninstall flask-cors -y
  pip install flask-cors
  

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