Comment appeler une API externe avec un CORS valide ?

Le problème

J’ai testé le LLM d’Infomaniak l’année dernière sur une application et j’ai à nouveau été confronté au problème CORS (Cross-Origin Resource Sharing).

C’est un problème récurrent lorsque vous hébergez votre application sur par exemple https://my-app.com et qu’elle consomme une API sur https://api.example.com.

Le navigateur vous empêchera de le faire à moins que le backend n’autorise explicitement le frontend avec l’en-tête Access-Control-Allow-Origin, en espérant que vous avez pas configurer *…

MDN décrit en détail le concept sur leur site web.

La solution

Si vous utilisez Netlify, vous pouvez utiliser deux méthodes :

Le fichier netlify.toml

Comme l’indique un fil de discussion sur le forum de Netlify (PS : j’ai écrit l’article en anglais en août 2024 et je n’avais pas pris note du lien, désolé), vous devez définir une règle de réécriture :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

# This is the rule to query the API without CORS
[[redirects]]
  from = "/api/*"
  to = "https://api.example.com/:splat"
  status = 200
  force = true

# This is the rule you set to handle soft 404 in your SPA
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Un fichier _redirects

Cette option est la même que la précédente, mais vous l’écrivez différemment :

1
2

/api-llm https://api.example.com/:splat 200
/\* /index.html 200

Veillez également à nommer le fichier _redirects et à le placer dans le répertoire public pour Netlify le prenne en compte.

Crédit : Photo de Markus Spiske sur Unsplash.