React Native前端请求FastAPI登录接口遇网络错误求助

错误日志 #

ERROR  [TypeError: Cannot read property 'msg' of undefined]
ERROR  [TypeError: Cannot read property 'data' of undefined]
ERROR  Network Error
ERROR  AxiosError
ERROR  ERR_NETWORK
ERROR  {"adapter": ["xhr", "http"], "data": "{\"username\":\"adrian\",\"password\":\"123\"}", "env": {"Blob": [Function Blob], "FormData": [Function FormData]}, "headers": {"Accept": "application/json, text/plain, */*", "Content-Type": "application/json"}, "maxBodyLength": -1, "maxContentLength": -1, "method": "post", "timeout": 0, "transformRequest": [[Function transformRequest]], "transformResponse": [[Function transformResponse]], "transitional": {"clarifyTimeoutError": false, "forcedJSONParsing": true, "silentJSONParsing": true}, "url": "http://0.0.0.0:80/token", "validateStatus": [Function validateStatus], "xsrfCookieName": "XSRF-TOKEN", "xsrfHeaderName": "X-XSRF-TOKEN"}
ERROR  {"DONE": 4, "HEADERS_RECEIVED": 2, "LOADING": 3, "OPENED": 1, "UNSENT": 0, "_aborted": false, "_cachedResponse": undefined, "_hasError": true, "_headers": {"accept": "application/json, text/plain, */*", "content-type": "application/json"}, "_incrementalEvents": false, "_lowerCaseResponseHeaders": {}, "_method": "POST", "_perfKey": "network_XMLHttpRequest_http://0.0.0.0:80/token", "_performanceLogger": {"_closed": false, "_extras": {}, "_isLoggingForWebPerformance": false, "_pointExtras": {}, "_points": {"initializeCore_end": 687811160.947458, "initializeCore_start": 687811102.854}, "_timespans": {"network_XMLHttpRequest_http://0.0.0.0/token": [Object], "network_XMLHttpRequest_http://0.0.0.0:80/token": [Object], "network_XMLHttpRequest_http://localhost:8081/symbolicate": [Object], "network_XMLHttpRequest_https://0.0.0.0/token": [Object]}}, "_requestId": null, "_response": "The resource could not be loaded because the App Transport Security policy requires the use of a secure connection.", "_responseType": "", "_sent": true, "_subscriptions": [], "_timedOut": false, "_trackingName": "unknown", "_url": "http://0.0.0.0:80/token", "readyState": 4, "responseHeaders": undefined, "status": 0, "timeout": 0, "upload": {}, "withCredentials": true}
ERROR  [TypeError: Cannot read property 'msg' of undefined]

问题背景 #

我负责React Native前端开发，尝试携带登录参数向FastAPI后端（Uvicorn部署在http://0.0.0.0:80）发送登录请求时出现上述错误。后端未收到任何前端请求（仅能接收FastAPI文档的请求），即使配置了CORS也无效。

前端登录函数 #

const login = async (username: string, password: string) =>{
        try{
            const result = await axios.post(`http://0.0.0.0:80/token`, {username, password});

            setAuthState({
                token: result.data.access_token,
                authenticated: true
            })

            axios.defaults.headers.common['Authorization'] = `Bearer ${result.data.access_token}`;

            await SecureStore.setItemAsync(TOKEN_KEY, result.data.access_token);

            return result;
        }catch(e){
            console.error(e.message);
            console.error(e.name);
            console.error(e.code);
            console.error(e.config);
            console.error(e.request);
        }
    }

后端相关代码 #

main.py #

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
from routes import router, init_db
from database import engine, test_connection

app = FastAPI()
app.include_router(router)

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

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

@app.on_event("startup")
async def startup_event():
    await init_db(engine)
    await test_connection()

docker-compose.yml #

version: '3.8'

services:
  web:
    build: .
    command: sh -c "until nc -z db 5432; do sleep 1; done; uvicorn main:app --host 0.0.0.0 --port 80"
    volumes:
      - .:/usr/src/app
    ports:
      - "80:80"
    depends_on:
      - db
    environment:
      DATABASE_URL: postgresql+asyncpg://postgres:12345@db:5432/postgres

  db:
    image: postgres:13
    volumes:
      - postgres_data:/var/lib/postgresql/data
    environment:
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: 12345
      POSTGRES_DB: postgres

volumes:
  postgres_data:

登录接口代码 #

@router.post("/token", response_model=Token)
async def login(
    form_data: Annotated[OAuth2PasswordRequestForm, Depends()],
    db: AsyncSession = Depends(get_db)
):
    user = await authenticate_user(db, form_data.username, form_data.password)

    if not user:
        raise HTTPException(status_code=400, detail="Incorrect username or password")
    access_token_expires = timedelta(minutes=ACCESS_TOKEN_EXPIRE_MINUTES)
    access_token = await create_access_token(
        data={"sub" : user.username, "scopes" : form_data.scopes},
        expires_delta=access_token_expires,
    )

    return {"access_token" : access_token, "token_type" : "bearer"}

疑问 #

我猜测前端可能要求通过HTTPS发送请求，但后端当前使用HTTP，不确定这是否为根本问题。想咨询是否必须将后端改为HTTPS，或是有其他解决方案。

内容的提问来源于stack exchange，提问作者Adrian Cielniak