连接 localhost fastapi 以响应应用程序 [关闭]

Question

关闭。 此问题不可重现或由拼写错误引起。 它目前不接受答案。

---

此问题是由拼写错误或无法再重现的问题引起的。 虽然类似的问题可能是这里的主题，但这个问题的解决方式不太可能帮助未来的读者。

3天前关闭。

改进这个问题

我正在尝试开发一个连接到 python fastapi 服务器的反应应用程序。 我正在本地计算机上开发前端和后端。 当我尝试使用 fetch API 从我的 python 服务器获取数据时，我收到一堆错误，说明 CORS 权限被拒绝和 Uncaught (in promise) TypeError: Failed to fetch。 我已将 "proxy": "HTTP://localhost:3000" 添加到我的 package.json 文件中，但仍然收到相同的错误。 我该如何解决这个问题？ 我的后端在端口 80 上，我的前端在端口 3000 上。如果我可以提供更多信息以使这篇文章更清晰，请告诉我。 我对处理 APIS 和 JS 比较陌生

这是我的后端脚本

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


myApp = FastAPI()
userInput = 0

origins = [
    "http://localhost:3000",
    "localhost:3000"
]


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


@myApp.get("/")
def default():
    return "enter a number after a slash in the URL"


@myApp.get("/is-prime")
def is_prime():
    prime = True
    sqrt = int(math.sqrt(userInput))
    for i in range(2, sqrt + 1):
        if userInput % i == 0:
            prime = False
            break

    return {"prime": prime} 

这是我的前端脚本

 import React from 'react' import './App.css'; class App extends React.Component { constructor(props){ super(props); this.state = { input: 0, prime: true, testList: [] } } componentDidMount() { console.log("content is being loaded") fetch("http://localhost:80") .then(res => res.json()) .then(json => { this.setState({ prime: json["prime"], }) console.log("content is loaded") console.log("testList is " + String(this.state.testList)) }); } render() { return ( <div className="App"> <header className="App-header"> <h2>Welcome to the prime finder App.</h2> <p>Enter a Number below</p> <form> <input type="number"></input> <button> Is it prime? </button> </form> <p>{this.state.prime ? "Yes its prime!" : "No its not prime"}</p> </header> </div> ); } } export default App;

Answer 1

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

首先尝试允许所有来源，当它工作正常时，您可以尝试限制