本地React应用连接FastAPI报CORS及fetch错误如何解决

你的报错是3处核心配置错误叠加导致，按顺序修改即可解决：

• 后端CORS中间件挂载对象错误
  你初始化的FastAPI实例名为myApp，但添加CORS中间件时调用的是不存在的app.add_middleware()，导致CORS放行规则完全没有生效。将中间件挂载代码改为：

  myApp.add_middleware(
      CORSMiddleware,
      allow_origins = ["http://localhost:3000"],
      allow_credentials = True,
      allow_methods = ["*"],
      allow_headers = ["*"]
  )
  

  原来origins数组里不带http协议的localhost:3000条目可以直接删除，浏览器发起跨域请求时携带的Origin头是带协议的，该条目不会匹配到任何请求。
• React代理配置写反
  package.json中的proxy字段需要填写后端服务的访问地址，你当前配置的http://localhost:3000是前端自身的运行端口，代理规则完全失效。将配置修改为：

  "proxy": "http://localhost:80"
  

  修改后必须重启React开发服务，配置才会生效。

  提示：80端口是操作系统特权端口，普通用户权限启动服务会出现端口绑定失败的问题，建议开发阶段将后端服务端口改为8000等非特权端口，启动FastAPI时执行命令uvicorn 你的文件名:myApp --port 8000，对应proxy地址同步改为http://localhost:8000即可。

• 前端请求逻辑错误
  1. 你当前fetch写死了全地址http://localhost:80，即使代理配置正确也不会走代理，开发环境直接使用相对路径即可。
  2. 你请求的是根路径/，该接口返回的是普通字符串，直接调用res.json()会触发解析报错，你实际需要请求的是质数判断接口/is-prime。
     将componentDidMount中的请求代码修改为：

  componentDidMount() {
      console.log("content is being loaded")
      fetch("/is-prime")
          .then(res => {
              if (!res.ok) throw new Error("接口请求异常")
              return res.json()
          })
          .then(json => {
              this.setState({
                  prime: json.prime,
              })
              console.log("content is loaded")
          })
          .catch(err => console.log(err));
  }
  

后续优化提示 #

你当前后端用于判断的userInput是固定为0的全局变量，没有接收前端传入的数值，后续联调时需要给/is-prime接口添加参数接收逻辑，否则无论前端输入什么内容，返回的都是数字0的质数判断结果。

内容的提问来源于stack exchange，提问作者Chris Howe