为什么flask框架，写的接口，浏览器网络响应里面看不到后端放回的json，正常来说我前端请求头里面Authorization故意写为空，后端代码中间件也确定出发了，但是浏览器网络响应里面看不到return jsonify({"msg": "Token is missing!"}), 403，其他接口也一样，成功或者失败都看不懂我后端return 的jsonify，这是为什么
app.py代码：
# app.py
from flask import Flask
import config
from exts import init_exts
import middleware
from blueprint.auth import dp as auth_dp
from blueprint.qa import dp as qa_dp
from flask_cors import CORS
app = Flask(__name__)
CORS(app, supports_credentials=True)
# 加载配置
app.config.from_object(config)
# 初始化扩展
init_exts(app)
# #设置中间件
middleware.init_app(app)
# 注册蓝图
app.register_blueprint(auth_dp)
app.register_blueprint(qa_dp)
if __name__ == '__main__':
app.run(debug=True)
中间件代码# middleware.py
# middleware.py
from flask_jwt_extended import decode_token
from flask import request, jsonify,g
import mrd
#不需要token验证接口
check_list=[
'auth.login',
'auth.register'
]
def token_required():
token = request.headers.get('Authorization', '')
if not token:
return jsonify({"msg": "Token is missing!"}), 403
try:
token = decode_token(token)
g.token = token
except Exception as e:
print(f"Token decoding error: {e}")
return jsonify({"msg": "Invalid Token!", "error": str(e)}), 403
def init_app(app):
"""
@app.before_request 修饰器
before_request 是一个 Flask 钩子（hook），它会在每次请求处理之前执行。
这里通过 @app.before_request 注册了一个函数 before_request()，在每次请求时检查某些条件并可能执行额外逻辑。
"""
@app.before_request
def before_request():
# 获取当前请求的端点
endpoint = request.endpoint
# 如果是登录或注册的端点，则跳过验证
if endpoint in check_list:
return None
# 对其他以 'auth' 开头的端点执行 token 验证
return token_required()
接口代码qa.py
@dp.route("/my", methods=["GET", "POST"])
def my():
data = request.get_json(silent=True) or {}
user = getattr(g, "token", None)
search = data.get("search", '')
if not search:
query = db.session.query(models.blog).filter(models.blog.user_id == user["id"]).all()
else:
query = db.session.query(
models.blog.title,
models.blog.id,
).filter(
models.blog.user_id == user["id"],
models.blog.title.like(f"%{search}%")
).all()
result = [{"id": item.id, "title": item.title} for item in query]
return jsonify({"data": result})
前端代码blog.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的博客</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="search.html">搜索</a></li>
<li><a href="my.html">我的</a></li>
<li><a href="register.html">注册</a></li>
<li><a href="login.html">登录</a></li>
</ul>
</nav>
</header>
<section class="blog-header">
<h1>我的博客</h1>
</section>
<main>
<div class="blog-container" id="blog-container">
<!-- 博客内容将通过 JavaScript 动态插入 -->
</div>
</main>
<footer>
<p>© 2025 我的博客</p>
</footer>
<!-- 内联 JavaScript，放在 body 标签结束前 -->
<script>
const apiUrl = "http://127.0.0.1:5000/ruan/my";
const blogContainer = document.getElementById("blog-container");
fetch(apiUrl, {
method: 'GET',
headers: {
'Authorization': "",
// 'Authorization': `Bearer ${token}`,
'Content-Type': 'application/json'
},
mode: 'no-cors' // 会让响应无法访问内容
})
.then((response) => {
// If response is not OK (not a 2xx status)
if (!response.ok) {
// If the response body is empty or text, handle it
return response.text().then((text) => {
console.error("后台错误:", text); // Log raw text response for debugging
throw new Error(text || "请求失败！");
});
}
// Try to parse the response body as JSON
return response.json().catch((err) => {
// If there's an error parsing the JSON (e.g., empty or malformed JSON)
console.error("无法解析 JSON:", err);
throw new Error("无法解析返回的 JSON 数据");
});
})
.then((data) => {
// If data is successfully fetched and parsed
console.log("Data fetched:", data);
if (data && Array.isArray(data.data)) {
data.data.forEach((item) => {
const blogCard = document.createElement("div");
blogCard.className = "blog-card";
const blogTitle = document.createElement("h2");
blogTitle.textContent = item.title;
blogCard.appendChild(blogTitle);
const blogLink = document.createElement("a");
blogLink.className = "blog-link";
blogLink.href = `/blog/${item.id}`;
blogLink.textContent = "查看详情";
blogCard.appendChild(blogLink);
blogContainer.appendChild(blogCard);
});
} else {
blogContainer.innerHTML = "<p>没有找到博客内容。</p>";
}
})
.catch((error) => {
// Catch any errors that occur during the fetch or JSON parsing
console.error("数据获取失败:", error.message);
blogContainer.innerHTML = `<p>加载数据失败: ${error.message}</p>`;
});
</script>
</body>
</html>
