Senden einer POST-Anfrage an die FastAPI-App, die auf localhost ausgeführt wird, mithilfe der JavaScript-Abruf-API ⇐ HTML

[Guest]

Auf meinem lokalen Computer läuft eine FastAPI-Anwendung unter der URL: http://localhost:8000, die den folgenden Python-Code verwendet:

Code: Select all

from typing import Union
from fastapi import FastAPI
from pydantic import BaseModel
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

origins = [
"*"
'''
"http://localhost:8000/add_points/",
"http://localhost:8000/check_points/",
"http://localhost:8000/check_item_points/",
"http://localhost:8000/redeem_points/"
'''
]

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

users = {"matt": 0}
items = {"ticket": 7}

class User(BaseModel):
name: str
points: float
item: str

class AddTransaction(BaseModel):
name: str
points: float

class UserPoints(BaseModel):  # anything that extnds this base model is a pyantic model
name: str
points: float

class Item(BaseModel):
name: str
points: float

# -----Post Requests-----
@app.post("/add_points/")
def add_points(add_transaction: AddTransaction):
global users
user_id = add_transaction.name
points = add_transaction.points
users[user_id] = users.get(user_id, 0) + points
return users[user_id]

@app.post("/check_points/")
def check_points(user_points: UserPoints):
global users
user_id = user_points.name
points = user_points.points
return users[user_id], points

@app.post("/check_item_points/")
def check_item_points(item: Item):
global items
item_id = item.name
points = item.points
return item[item_id], points

@app.post("/redeem_points/")  # user spends points (they lose points) gain an item
def redeem_points(add_transaction: AddTransaction, user_points: UserPoints, item: Item, user: User):
global users
global items
user_id = add_transaction.name
user_points = user_points.points
item_points = item.points
item_pre = item.name
item_post = user.item
if user_points >= item_points:
user_points == user_points - item_points
item_post == item_pre
return users[user_id], users[user_points], users[item_post]
else:
return "insufficient funds"

# -----Get Requests-----
@app.get("/")
def read_root():
return {"Hello": "World"}

# -----Put Requests-----
""""
@app.put("/items/{item_id}")
def update_item(item_id: int, item:Item):
return {"item_name": item.name, "item_id": item_id}
"""

if __name__ == "__main__":
import uvicorn

uvicorn.run(app, host="0.0.0.0", port=8000)

Ich habe auch eine HTML-Datei mit einem JS-Skript darin, das beim Klicken einfach eine POST-Anfrage an http://localhost:8000/add_points/ sendet ein Knopf. Hier ist der Code dafür:

Code: Select all

Send Request



$("#send").on("click", evt => {
$.post("http://localhost:8000/add_points/",
{
name: "string",
points: 5.0
},
function(data, status){
alert("Data: " + data + "\nStatus: " + status);
});
});

Wenn ich jedoch versuche, die POST-Anfrage zu senden, erhalte ich in PyCharm die folgenden Fehlermeldungen:

INFO: 127.0.0.1:49413 – „OPTIONS /add_points/ HTTP/1.1“ 400 Bad Request


INFO: 127.0.0.1:49413 – „POST /add_points/ HTTP/1.1“ 422 Unprocessable Entity

Ich verstehe, dass mindestens einer dieser Fehler vom CORS herrührt Allerdings richtet sich dieses Projekt an Mobiltelefonbenutzer, die keine Browsererweiterungen installieren müssen, um die Richtlinie außer Kraft zu setzen. Für Ratschläge zur Behebung dieser Fehler wären wir sehr dankbar!
UPDATE BEARBEITEN:

Code: Select all

const url = new URL('localhost:8000/add_points/');
$("#send").on("click", evt => { fetch(url,
{
method: 'POST',
headers: {'Accept': 'application/json', 'Content-Type': 'application/json'},
body: JSON.stringify({"name":"John", "points":50.0})
}).then().catch((error) => { console.log(error.message); }); });

Ich erhalte immer noch den Fehler 400 Bad Request.