flask，按照网上查的要求，配置了cors，允许全部，为什么前端访问还是会报错，是后端的问题还是前端的问题
<!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");
const token = localStorage.getItem('token');
fetch(apiUrl, {
method: 'GET',
headers: {
'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>
前端代码
# 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
CORS(app, supports_credentials=True, resources={r"/*": {"origins": "*"}})
# 加载配置
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)
```python
import random
import time
from flask import Blueprint, request, jsonify,g
from flask_jwt_extended import create_access_token
from flask_mail import Message
import models
from exts import mail, db
dp = Blueprint("qa", __name__, url_prefix="/ruan")
@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})
后端代码
