第6.2章：CORS设置

学习时间： 30分钟

---

1. CORS：它是什么以及为什么需要？

正如我们所知，CORS（跨域资源共享） 是一种浏览器安全策略。它旨在防止恶意网站 evil-site.com 代表您（使用您的 Cookie）向 your-bank.com 发送请求并窃取数据的情况发生。

它是如何工作的？

1. 前端（浏览器） 从域 A 请求获取域 B 的数据。
2. 浏览器向域 B 发送一个特殊的“预检”请求（preflight request），使用 OPTIONS 方法询问：“嘿，域 B，域 A 可以向你发送 GET 请求吗？”
3. 后端（域 B 上的服务器） 必须使用特殊的 HTTP 头进行响应，例如：Access-Control-Allow-Origin: A。
4. 如果服务器响应允许该请求，浏览器会发送主 GET 请求。否则，它会阻止该请求并发出 CORS 错误。

💡 太空类比：

在将船长传送到外星站（发送 POST 请求）之前，飞船（浏览器）会派出一架无人机（OPTIONS 请求）询问：“空间站，你们接受‘企业号’飞船的传送吗？”空间站（API）回答：“是的，允许‘企业号’的传送”（Access-Control-Allow-Origin 头）。只有在那之后，传送才会开始。

---

2. Laravel 中的 CORS 设置（Laravel 11+ 的现代方法）

在 Laravel 11+ 中，CORS 配置变得更加简单，如果您只需要基本设置，则无需发布 config/cors.php 文件。所有内容都通过 .env 文件和 bootstrap/app.php 进行管理。

步骤 1：通过环境变量配置

打开您的 .env 文件。Laravel 默认已经提供了用于管理 API CORS 的变量。

# .env

# ... 其他变量

# 指定 CORS 将生效的路径。
# 'api/*' - 所有 API 路由的标准值。
CORS_PATHS=api/*

# 指定允许的来源（域）。
# 对于开发环境，请指定您前端的地址。
# 可以用逗号分隔，不要有空格。
CORS_ALLOWED_ORIGINS=http://localhost:5500,http://127.0.0.1:5500

# 其他设置（通常可以保留默认值）
CORS_ALLOWED_METHODS=*
CORS_ALLOWED_HEADERS=*
CORS_EXPOSED_HEADERS=
CORS_MAX_AGE=0
CORS_SUPPORTS_CREDENTIALS=false

关键变量：

• CORS_ALLOWED_ORIGINS：最重要的变量。 您在此处列出允许请求的域。 * 允许所有域，但这对于生产环境来说极不安全。

• CORS_PATHS：这些规则适用的路径。api/* 表示所有以 /api/ 开头的路径。

更改 .env 后，如果您使用 php artisan serve，则无需重启服务器。更改会自动生效。

步骤 2（可选）：bootstrap/app.php 中的高级设置

如果您需要更复杂的逻辑（例如，使用模式允许子域），您仍然需要发布配置文件并设置中间件。但对于 95% 的情况，.env 文件就足够了。

命令 php artisan install:api 会自动在 bootstrap/app.php 文件中为 API 路由配置基本的 CORS 中间件。它看起来是这样的：

// bootstrap/app.php
->withMiddleware(function (Middleware $middleware) {
    // 这一行将由 install:api 命令自动添加
    // 它包含了所有 API 路由的 CORS 处理
    $middleware->api(base_path('routes/api.php'));
})

在 ->api() 内部，Laravel 已经使用了 HandleCors 中间件，它会从您的 .env 文件中读取设置。一切都非常简单，开箱即用。

⚠️ 重要！ 如果您的 API 并非完全公开，请勿在生产服务器上使用 CORS_ALLOWED_ORIGINS='*'。这会带来潜在的安全漏洞。请务必列出您前端的具体域。

---

3. FastAPI 中的 CORS 设置

FastAPI 使用 中间件（Middleware） 的概念来处理 CORS 等横切关注点。

步骤 1：打开您的主应用程序文件

这是您创建 FastAPI 实例的文件（通常是 main.py）。

步骤 2：添加 CORSMiddleware

FastAPI 提供了现成的中间件用于 CORS 配置。

# main.py
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware # 1. 导入中间件

app = FastAPI(
    title="SpaceAPI",
    description="API 用于管理银河系中的行星",
    version="1.0.0"
)

# 2. 允许的来源列表（origins）
origins = [
    "http://localhost:5500",
    "http://127.0.0.1:5500",
    # 在生产环境中，这里会是您前端的域名
    # "https://my-awesome-app.com",
]

# 3. 将中间件添加到应用程序
app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,  # 允许指定的来源
    allow_credentials=True, # 允许 Cookie（身份验证时需要）
    allow_methods=["*"],    # 允许所有方法（GET, POST 等）
    allow_headers=["*"],    # 允许所有头部
)

# ... 此处是您的路由和其他代码

步骤 3：重启 Uvicorn 服务器 Uvicorn 服务器通常在代码更改时自动重载。如果没有，请手动重启。现在您的 FastAPI 服务器将正确响应来自前端的 OPTIONS 请求。

---

巩固知识小测验

1. 浏览器在主要请求之前发送的用于检查 CORS 的请求称为：

a) CHECK request b) Preflight request c) Handshake request

2. 在现代 Laravel (11+) 中，CORS 的基本设置主要在哪里配置：

a) bootstrap/app.php 文件 b) .env 文件 c) routes/api.php 文件

3. 在 FastAPI 中，用于配置 CORS 的是：

a) @app.cors() 装饰器 b) 内置的 Security 类 c) 中间件（`Middleware`）

4. 对于生产环境，哪个 CORS_ALLOWED_ORIGINS 值最安全？

a) CORS_ALLOWED_ORIGINS='*' b) CORS_ALLOWED_ORIGINS=http://my-frontend.com,https://my-frontend.com` c) 不设置此变量

检查

---

🚀 本章总结：

您已成为“星际通信外交官”！您的 API 现在可以安全地与外部应用程序交互，采用现代且正确的方法。

• ✅ 理解了 CORS 和预检请求的工作机制。
• 🔧 通过 .env 文件为 Laravel 11+ 配置了 CORS。
• ⚙️ 使用 CORSMiddleware 为 FastAPI 配置了 CORS。
• 🛰️ 成功建立了前端和后端之间的连接。

通信桥梁已建成并受到保护。 现在可以考虑如何只允许“授权人员”通过这座桥梁。

📌 检查：

• 成功的主要标准是：当前端请求数据时，浏览器控制台中没有 CORS 错误。
• 在开发者工具的“网络”（Network）选项卡中，您可以看到对您的 API 发送了两个请求：第一个是 OPTIONS 方法（状态 200/204），第二个是 GET 方法（状态 200）。这是 CORS 工作原理的直观演示。