Setup do Axios (React + FastAPI)

Fazer o setup do projeto React com o Vite, pois ele já cria um projeto com configurações prontas em TypeScript.

Instalar o Vite:

npm install -g create-vite

Criar projeto React com TypeScript já configurado:

create-vite meu-projeto --template react-ts

Instalar o Axios (dependência que faz as requisições):

npm install axios

No App.tsx, importar o axios e configurar. Aqui estou criando um botão de requisição como exemplo:

import axios from "axios"

function App() {

  function requestAxios () {
    axios
      .get("http://127.0.0.1:8000/")
  }

  return (
    <>
      <div>
        <button onClick={requestAxios}>Fazer request</button>
      </div>

    </>
  )
}

export default App

No FastAPI, importar e configurar o CORS:

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

app = FastAPI() 

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

@app.get("/")
def root():
    return {"message": "it works"}

Checar aqui pra ver se funciona:

Ok!