什么是跨域请求（CORS）？

跨域请求（CORS，Cross-Origin Resource Sharing）是浏览器的一种安全机制，它限制了网页从一个域名（例如 example.com）去请求另一个域名（例如 api.example.com）的资源。这个限制的目的是为了防止恶意网站发起未授权的请求，保护用户的隐私和安全。

例如，如果你有一个前端应用运行在 http://localhost:3000，它通过浏览器发起一个 API 请求去访问 http://api.example.com/data，这就是一个跨域请求，因为前端和后端的域名不同。浏览器默认会阻止这种跨域请求，除非服务器明确允许跨域访问。

为什么会遇到 CORS 问题？

在开发 Web 应用时，尤其是前端和后端分开部署的情况下，前端应用可能会在一个域名下运行，而后端 API 可能在另一个域名下。这种情况下，如果没有正确配置 CORS，浏览器会因为安全原因拦截请求。

示例：

如果前端想访问后端 API，在没有设置 CORS 的情况下，浏览器会拒绝请求，显示跨域错误。

CORS 的工作原理

CORS 是通过 HTTP 头部信息来控制跨域请求的：
• Access-Control-Allow-Origin: 允许哪些域名可以访问该资源。可以指定为某个域名，也可以是 *，表示允许任何域名访问。
• Access-Control-Allow-Methods: 允许哪些 HTTP 方法（如 GET、POST、PUT 等）可以跨域访问。
• Access-Control-Allow-Headers: 允许哪些请求头可以被发送。
• Access-Control-Allow-Credentials: 是否允许发送身份凭证（如 cookies 或 HTTP 认证信息）。

当浏览器发起一个跨域请求时，会先发送一个 预检请求（OPTIONS 请求），询问服务器是否允许该跨域请求。如果服务器允许，它会在响应中返回适当的 CORS 头部，告诉浏览器可以继续发起实际的请求。

如何解决 CORS 问题？

在使用 FastAPI 时，CORS 问题通常会出现在前端和后端应用部署在不同域名时。为了处理这种问题，你可以通过配置 FastAPI 的中间件来允许跨域请求。

FastAPI 提供了 CORSMiddleware 来处理 CORS 配置。

CORSMiddleware 详解

FastAPI 提供的 CORSMiddleware 可以很方便地配置 CORS 规则。通过 app.add_middleware() 方法添加 CORS 中间件，允许跨域访问。

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],  # 允许所有来源
    allow_credentials=True,  # 允许发送凭据（如 Cookie 或 HTTP 认证信息）
    allow_methods=["*"],  # 允许所有 HTTP 方法（GET, POST, PUT, DELETE 等）
    allow_headers=["*"],  # 允许所有请求头
)

参数解释：
• allow_origins: 允许跨域的源，可以是具体的 URL（例如 ["https://example.com"]），或者 [""] 表示允许所有来源的请求。
• allow_credentials: 是否允许跨域请求时携带凭证（如 Cookie 或 HTTP 认证信息）。默认为 False，如果需要携带身份信息（如登录信息），需要设置为 True。
• allow_methods: 允许哪些 HTTP 方法跨域请求。可以设置为 ["GET", "POST"] 等，或使用 [""] 允许所有方法。
• allow_headers: 允许哪些 HTTP 头部跨域请求。可以设置为 ["Content-Type", "Authorization"]，或使用 ["*"] 允许所有头部。

如果不设置 CORSMiddleware 会有什么问题？

如果你在 FastAPI 中没有配置 CORSMiddleware，并且前端和后端分别部署在不同的域下，当前端尝试访问后端的 API 时，浏览器会阻止这个跨域请求并抛出 CORS 错误。你通常会在浏览器的开发者工具中看到类似这样的错误信息：

Access to XMLHttpRequest at 'http://localhost:8000/api' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

这意味着浏览器阻止了这个请求，因为服务器没有返回允许跨域的头部信息。

总结
• 跨域请求 是指前端页面和后端服务位于不同的域名下，浏览器出于安全考虑阻止了跨域请求。
• 在 FastAPI 中，如果前后端在不同域名下，可以使用 CORSMiddleware 配置允许跨域请求。
• 配置 CORSMiddleware 可以解决 CORS 问题，允许特定来源的请求通过，控制哪些方法和头部可以跨域访问。

如果你的前后端应用都在同一域下，或者你不涉及跨域访问，通常就不会遇到 CORS 问题。

使用ip地址是否会遇到跨域问题？

使用 IP 地址访问时是否会出现跨域问题，取决于前端和后端的 源（origin） 是否不同。跨域问题的核心在于 源（origin） 的不同，而源由三个部分组成：
1. 协议（http 或 https）
2. 域名（例如 example.com）
3. 端口（例如 :80 或 :443）

  1. 使用 IP 地址访问时的跨域问题

当你用 IP 地址访问后端 API 时，跨域问题是否发生，取决于以下几点：
• 协议不同：如果你的前端应用是通过 http://localhost:3000 访问，而后端是通过 http://192.168.1.100:8000 访问，那么即使你使用的是 IP 地址，协议不同（一个是 http，一个可能是 https），依然会被视为不同的源。
• 端口不同：即使你使用相同的 IP 地址，只要端口号不同，浏览器也会认为是不同的源。例如，前端通过 http://192.168.1.100:3000 访问，后端通过 http://192.168.1.100:8000，浏览器依然会认为这两个 URL 是跨域的。
• 协议、域名和端口相同：如果前端和后端都使用相同的协议、域名和端口（例如都使用 http://192.168.1.100:8000），则不会有跨域问题，因为它们的源是相同的。

  1. 是否会出现跨域问题？

假设你的前端应用和后端服务是通过以下方式访问的：
• 前端：http://localhost:3000
• 后端：http://192.168.1.100:8000

在这种情况下，因为 协议不同（localhost 和 192.168.1.100 都是不同的源，即使它们可能指向同一台机器），浏览器会认为这是跨域请求，并且你会遇到 CORS 问题，除非你在后端配置了 CORS 中间件来允许来自 localhost:3000 的请求。

  1. 解决跨域问题

无论是使用域名还是 IP 地址，只要协议、域名或端口不同，都会产生跨域问题。所以，即使你使用 IP 地址，只要涉及到跨域访问，依然需要配置 CORS。

例如，在 FastAPI 中，你可以这样配置 CORS 中间件，允许来自任何来源（包括通过 IP 地址访问的请求）进行访问：

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

添加 CORS 中间件，允许所有来源

app.add_middleware(
CORSMiddleware,
allow_origins=[""], # 允许所有来源
allow_credentials=True,
allow_methods=[""], # 允许所有 HTTP 方法（GET, POST, PUT, DELETE 等）
allow_headers=["*"], # 允许所有请求头
)

如果你想限制只允许特定的 IP 或域名访问，可以修改 allow_origins 为特定的 IP 地址或域名：

app.add_middleware(
CORSMiddleware,
allow_origins=["http://192.168.1.100:3000"], # 只允许该 IP 地址和端口访问
allow_credentials=True,
allow_methods=[""],
allow_headers=[""],
)

  1. 总结
    • 跨域问题的本质是浏览器基于不同的协议、域名、端口来判断是否是不同的源（origin）。
    • 即使你使用的是 IP 地址，只要协议或端口不同，浏览器依然会认为是跨域请求。
    • 为了避免跨域问题，需要在后端配置 CORS 中间件，允许来自特定源的请求。