Setup do Axios (React + FastAPI)

#TypeScript
#FastAPI
#React

Esse artigo não é um tutorial, são minhas anotações. Mas pode te ajudar!

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

1 - Instalar o Vite (se necessário):

npm install -g create-vite

2 - Criar projeto React com TypeScript já configurado:

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

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

npm install axios

4 - 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

5 - 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"}

6 - Checar se funciona (F12 no browser, Rede > Resposta) :

Tudo ok!