网络知识篇

什么是跨域问题CORS

新手最常遇到的网络拦截

如果你在开发中见过这样的报错，恭喜你，你遇到了跨域问题：

Access to fetch at 'https://api.example.com/data'
from origin 'http://localhost:3000' has been blocked by CORS policy

这个错误让无数新手崩溃，但其实原理很简单。

什么是"同源"？

浏览器有一条安全规则叫同源策略（Same-Origin Policy）：只允许网页向同源的服务器发送请求。

"同源"是指协议、域名、端口三者完全相同：

加载图表中...

同源判断示例

以 https://www.example.com 为基准：

URL	是否同源	原因
`https://www.example.com/api`	✅ 同源	完全相同
`http://www.example.com`	❌ 跨域	协议不同
`https://api.example.com`	❌ 跨域	域名不同
`https://www.example.com:8080`	❌ 跨域	端口不同

为什么要有同源策略？

如果没有同源策略，恶意网站可以随意读取你在其他网站上的数据：

加载图表中...

⚠️ 注意：同源策略是浏览器的安全限制。服务器之间的请求、Postman、curl 等工具不受此限制。

CORS：跨域的"通行证"

CORS（Cross-Origin Resource Sharing，跨域资源共享） 是服务器告诉浏览器"我允许这个网站访问我"的机制。

加载图表中...

关键响应头

响应头	作用	示例值
`Access-Control-Allow-Origin`	允许哪些域名访问	`http://localhost:3000` 或 `*`
`Access-Control-Allow-Methods`	允许哪些HTTP方法	`GET, POST, PUT, DELETE`
`Access-Control-Allow-Headers`	允许哪些请求头	`Content-Type, Authorization`
`Access-Control-Allow-Credentials`	是否允许携带Cookie	`true`

预检请求（Preflight）

对于"复杂请求"（如带自定义请求头的POST），浏览器会先发一个 OPTIONS 预检请求，问服务器"我能不能发这个请求？"

加载图表中...

解决跨域的方法

方法1：服务端配置 CORS 响应头（推荐）

// Node.js + Express
const cors = require("cors");
app.use(cors({
  origin: "http://localhost:3000",  // 允许的前端地址
  methods: ["GET", "POST", "PUT", "DELETE"],
  credentials: true,  // 允许携带Cookie
}));

# Python + Flask
from flask_cors import CORS
CORS(app, origins=["http://localhost:3000"])

方法2：Next.js API 路由（同源代理）

在 Next.js 中，API Routes 和前端页面是同源的，天然不存在跨域问题：

前端页面：  http://localhost:3000/page
API路由：   http://localhost:3000/api/data  ← 同源！

// app/api/data/route.ts — Next.js API 路由
export async function GET() {
  // 服务端请求外部API（不受CORS限制）
  const res = await fetch("https://external-api.com/data");
  const data = await res.json();
  return Response.json(data);
}

加载图表中...

方法3：开发环境代理

在 next.config.js 中配置代理：

// next.config.js
module.exports = {
  async rewrites() {
    return [
      {
        source: "/api/:path*",
        destination: "https://api.example.com/:path*",
      },
    ];
  },
};

常见跨域问题排查

现象	原因	解决
CORS 错误	服务端没配 CORS	添加 `Access-Control-Allow-Origin`
预检请求失败	服务端没处理 OPTIONS	添加 OPTIONS 路由处理
Cookie 发不出去	`credentials` 没配	前后端都设置 `credentials`
某些请求头被拒	没有 `Allow-Headers`	配置允许的请求头列表

🎯 AI编程小贴士：遇到 CORS 报错时，直接把完整的报错信息和你的前后端代码发给 AI。它会帮你精准定位是前端配置问题还是后端响应头缺失。

小结

同源策略是浏览器的安全机制，限制跨域请求
CORS 是服务器通过响应头允许跨域访问的标准方式
复杂请求会先发 OPTIONS 预检请求
最佳实践：用 Next.js API 路由 做同源代理，彻底避免跨域
跨域问题只存在于浏览器，服务端之间通信不受限制