本地主机出现403 Forbidden错误：React与FastAPI跨域请求问题

问题背景 #

我在端口3001部署了React本地服务，尝试向localhost:5000发起请求时，持续遇到403 Forbidden错误，本地环境下也无法解决。直接用Edge浏览器访问该地址同样报错，但单独使用pytrends时能正常获取数据。

相关代码 #

React代码片段 #

import { useState } from 'react';
import axios from 'axios';

const App = () => {
  const [inputText, setInputText] = useState('');
  const [score, setScore] = useState(null);
  const [last5Entries, setLast5Entries] = useState();

  const calculateScore = async () => {
    try {
      const response = await axios.post("http://localhost:5000/pytrends", { 'text': inputText });
      console.log(response);
      const interest = response.data.interest; // 待实现：获取相关兴趣数据
      const score = response.score;
      setScore(score);
    }
    catch (error) {
      console.error('计算利基分数出错:', error);
    }
  }

  return (
    // 页面HTML内容
  );
};

export default App;

FastAPI代码片段 #

from fastapi import FastAPI, Request
from pytrends.request import TrendReq
import pandas as pd

app = FastAPI()
df = pd.DataFrame(columns=["interest", "score"])  # 初始化全局存储DataFrame

@app.post("/pytrends")
async def trend_data(request: Request):
    pytrends = TrendReq(hl='en-US', tz=360)
    # 获取用户输入并转为列表格式（适配pytrends要求）
    request_data = await request.json()
    kw_list = [request_data['text']]

    pytrends.build_payload(kw_list, cat=0, timeframe='today 12-m', geo='', gprop='')  # 构建关键词请求负载，获取过去12个月数据
    data = pytrends.interest_over_time()  # 返回pandas格式的时间序列数据

    # 计算利基分数：对关键词对应列的数值求和
    niche_score = data[kw_list[0]].sum()

    # 将结果存入全局DataFrame
    data_dict = {"interest": kw_list[0], "score": niche_score}
    global df
    df = pd.concat([df, pd.DataFrame([data_dict])], ignore_index=True)

    return {"score": niche_score}

问题排查与解决步骤 #

1. 跨域资源共享(CORS)限制 #

React运行在3001端口，FastAPI在5000端口，属于不同源，浏览器默认会拦截跨域请求，这是403错误的最常见原因。

解决方法：给FastAPI添加CORS中间件

from fastapi.middleware.cors import CORSMiddleware

app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://localhost:3001"],  # 允许React服务的来源地址
    allow_credentials=True,
    allow_methods=["*"],  # 允许所有请求方法
    allow_headers=["*"],  # 允许所有请求头
)

2. FastAPI接口请求解析错误 #

原代码中kw_list = request.json()['text']存在两个问题：

• request.json()是异步方法，必须用await调用才能获取数据
• pytrends的build_payload要求传入列表类型的关键词，直接取字符串会导致内部报错，可能间接触发403或500状态码

修正后的代码已在上方FastAPI片段中体现，确保请求解析和参数格式正确。

3. 浏览器直接访问POST接口的误区 #

用Edge直接访问localhost:5000/pytrends时，浏览器默认发送GET请求，但该接口只支持POST方法，FastAPI会返回405 Method Not Allowed，部分浏览器可能将其显示为403。可以用curl或Postman测试POST请求：

curl -X POST http://localhost:5000/pytrends -H "Content-Type: application/json" -d '{"text": "python"}'

4. Google访问限制 #

单独使用pytrends正常，但FastAPI运行时可能因请求UA标识或频率问题被Google拦截，返回403。可以给pytrends设置自定义用户代理：

pytrends = TrendReq(
    hl='en-US', 
    tz=360, 
    headers={'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36'}
)

验证步骤 #

1. 重启FastAPI服务，确保CORS中间件和代码修正生效
2. 在React页面中输入关键词并调用接口，查看控制台是否返回成功响应
3. 用curl/Postman测试POST请求，确认接口能正常返回计算后的分数

内容的提问来源于stack exchange，提问作者Jacob Kavanal