```hl_lines="4"
INFO:     Uvicorn running on http://127.0.0.1:8000 (Press CTRL+C to quit)
```

Cette ligne montre l’URL où votre application est servie, sur votre machine locale.

### Vérifier { #check-it }

Ouvrez votre navigateur à l’adresse [http://127.0.0.1:8000](http://127.0.0.1:8000).

Vous verrez la réponse JSON suivante :

```JSON
{"message": "Hello World"}
```

### Documentation interactive de l’API { #interactive-api-docs }

http://localhost:8000/v1/agents/multivac
```

Même si l’hôte du site malveillant et celui de l’application locale sont différents, le navigateur ne déclenchera pas de pré-vérification CORS (preflight) parce que :

* Elle s’exécute sans aucune authentification, il n’y a pas à envoyer d’informations d’authentification.
* Le navigateur pense qu’il n’envoie pas de JSON (faute d’en-tête `Content-Type`).

Vous pouvez en savoir plus dans la [documentation de la CLI FastAPI](https://fastapi.tiangolo.com/fr/fastapi-cli/).

</details>

### Vérifier { #check-it }

Ouvrez votre navigateur à l'adresse [http://127.0.0.1:8000/items/5?q=somequery](http://127.0.0.1:8000/items/5?q=somequery).

Vous verrez la réponse JSON :

```JSON
{"item_id": 5, "q": "somequery"}
```

## Étapes { #steps }

Disons donc que vous avez un frontend exécuté dans votre navigateur à `http://localhost:8080`, et que son JavaScript essaie de communiquer avec un backend exécuté à `http://localhost` (comme nous ne spécifions pas de port, le navigateur supposera le port par défaut `80`).

Et elle renvoie un en-tête `WWW-Authenticate` avec la valeur `Basic`, et un paramètre optionnel `realm`.

Cela indique au navigateur d'afficher l'invite intégrée pour saisir un nom d'utilisateur et un mot de passe.

Ensuite, lorsque vous saisissez ce nom d'utilisateur et ce mot de passe, le navigateur les envoie automatiquement dans l'en-tête.

## Authentification HTTP Basic simple { #simple-http-basic-auth }

<div class="termy">

```console
$ fastapi dev

<span style="color: green;">INFO</span>:     Uvicorn running on http://127.0.0.1:8000 (Press CTRL+C to quit)
```

</div>

Ouvrez votre navigateur à l'adresse [http://127.0.0.1:8000](http://127.0.0.1:8000).

Vous verrez une page simple comme :

<img src="/img/tutorial/websockets/image01.png">

Ensuite, le navigateur vérifierait que la réponse est valide et chiffrée avec la bonne clé cryptographique, etc. Il **déchiffrerait la réponse** et la traiterait.

<img src="/img/deployment/https/https07.drawio.svg">

Voyons cela selon ce point de vue simplifié :

- L'utilisateur saisit le `username` et le `password` dans le frontend, puis appuie sur Entrée.
- Le frontend (exécuté dans le navigateur de l'utilisateur) envoie ce `username` et ce `password` vers une URL spécifique de notre API (déclarée avec `tokenUrl="token"`).

Mais ensuite, lorsque vous ouvrez l'interface de documentation intégrée (le frontend), elle s'attendra à obtenir le schéma OpenAPI à `/openapi.json`, au lieu de `/api/v1/openapi.json`.

Ainsi, le frontend (qui s'exécute dans le navigateur) essaiera d'atteindre `/openapi.json` et ne pourra pas obtenir le schéma OpenAPI.

que des en-têtes propriétaires personnalisés peuvent être ajoutés [en utilisant le préfixe `X-`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers).

Mais si vous avez des en-têtes personnalisés que vous voulez qu'un client dans un navigateur puisse voir, vous devez les ajouter à vos configurations CORS (en savoir plus dans [CORS (Cross-Origin Resource Sharing)](../tutorial/cors.md)), en utilisant le paramètre `expose_headers` documenté dans [la documentation CORS de Starlette](http...