尝试在 FastAPI 中启用 CORS 以在我的 React 代码中发出请求。没效果

Question

对于上下文，我有以下 JavaScript 代码来通过 get 请求从我的 API 中提取一些数据

useEffect(() => {

        async function getPhones(){
            try{
                const response = await fetch(
                    `https://api.myapi.com/phones?detailed=true&brand=${brand}`
                  );
                  const json = await response.json();
                  setPhones(json)
            } catch(error){
              console.error('Error fetching phones:', error);
          }
        }
        getPhones();
    }, [])

这给出了错误：

访问获取 'http://api.myapi.io/phones/?detailed=true&brand=LG'（重定向自 'https://api.myapi.io/phones?detailed=true&brand=LG') 来自原点 “http://127.0.0.1:5173”已被 CORS 策略阻止：否 请求中存在“Access-Control-Allow-Origin”标头 资源。如果不透明的响应满足您的需求，请设置请求的 模式设置为“no-cors”以在禁用 CORS 的情况下获取资源。

然后，我尝试按照 FastAPI 文档和之前关于 Atack Overflow 的问题来启用以下功能：

app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_methods=["*"],
    allow_headers=["*"]
)

我什至尝试省略一些堆栈溢出中所述的

allowed_methods

，但这些都不起作用。

我还注意到，在我的 useEffect 请求中，如果我使用 URL

https://api.myapi.com/phones

，则不会出现 CORS 错误，我不知道为什么

Answer 1

听起来您在从前端向 API 发出请求时遇到了 CORS（跨源资源共享）问题，并且您试图允许所有源使用 FastAPI 的

CORSMiddleware

访问您的 API。

以下是可能发生的情况：

1. CORS 行为：如果您从

   http://127.0.0.1:5173

   （或本地前端开发服务器）向

   https://api.myapi.com/phones

   发出请求，浏览器将阻止该请求，除非后端服务器明确允许该来源。

2. 为什么

   https://api.myapi.com/phones

   上没有 CORS 错误：使用

   https://api.myapi.com/phones

   时没有出现 CORS 错误的原因可能是后端服务器配置为允许来自某些来源的请求，但没有正确处理重定向或者在重定向期间没有发送正确的标头。

最佳解决方案：

• 确保您的 FastAPI 后端正确设置了正确的 CORS 标头。
• 此外，您应该检查是否存在重定向问题。

修复步骤：

1. 确保

   CORSMiddleware

   正确应用于FastAPI应用程序:

   您的 CORS 中间件配置似乎正确，但让我们确保它正确应用于所有路由。此外，FastAPI 一次仅支持一个 CORS 中间件，因此请避免添加重复或冲突的中间件。

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

app = FastAPI()

# CORS middleware configuration
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],  # Allow all origins (you can restrict this later)
    allow_methods=["*"],  # Allow all HTTP methods (GET, POST, etc.)
    allow_headers=["*"],  # Allow all headers
)

# Your endpoints here
@app.get("/phones")
async def get_phones(brand: str, detailed: bool):
    # Your logic to fetch phones
    return {"phones": []}  # Example response

2. 处理重定向：如果您的服务器从

   http://

   重定向到

   https://

   或反之亦然，浏览器可能会将其视为单独的请求，这可能会触发 CORS 问题。确保后端正确处理重定向或完全避免它。

3. 客户端：在客户端代码中，确保 URL 正确并且您将请求发送到正确的端点。如果后端发生任何重定向，请在浏览器获取中处理它或确保其安全。

   useEffect(() => {
     async function getPhones() {
       try {
         const response = await fetch(
           `https://api.myapi.com/phones?detailed=true&brand=${brand}`
         );
         if (!response.ok) {
           throw new Error('Network response was not ok');
         }
         const json = await response.json();
         setPhones(json);
       } catch (error) {
         console.error('Error fetching phones:', error);
       }
     }
     getPhones();
   }, [brand]);
   

4. 测试 CORS：使用 Postman 或 curl 等工具来测试 API 是否正确返回 CORS 标头。例如，您可以检查响应标头是否包含以下内容：

   Access-Control-Allow-Origin: *
   

5. 潜在的客户端修复（作为后备）： 如果您仍然遇到 CORS 问题，作为解决方法，您可以尝试在提取请求中使用

   mode: 'no-cors'

   ，但这会限制您访问响应正文的能力，使其仅适用于您可以接受的情况没有阅读回复。

   const response = await fetch(
     `https://api.myapi.com/phones?detailed=true&brand=${brand}`,
     { mode: 'no-cors' }
   );
   

但是，最好在服务器端解决 CORS 问题，而不是绕过它。

总结：

• 仔细检查 FastAPI 后端上的 CORS 中间件。
• 确保不存在违反 CORS 策略的不需要的重定向。
• 使用 Postman 等工具进行测试，以确认 CORS 标头正确。
• 始终确保您的客户端代码指向正确的端点。