# Setup do Axios (React + FastAPI)

<div data-node-type="callout">
<div data-node-type="callout-emoji">💡</div>
<div data-node-type="callout-text">Esse artigo não é um tutorial, são apenas anotações.</div>
</div>

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

Instalar o Vite:

```typescript
npm install -g create-vite
```

Criar projeto React com TypeScript já configurado:

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

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

```powershell
npm install axios
```

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

```typescript
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:

```python
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:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1695670083281/3ffb98ca-f12a-43fb-a2e4-0007279fad7f.png align="center")

Ok!