VueJS J'ai demandé un point d'extrémité XMLHttpRequest non sécurisé

Question

J'ai une application VueJs avec un backend Laravel comme API.

Lors de l'exécution locale, l'application fonctionne comme prévu avec https, mais lorsque sur le serveur de production, je reçois le message Requested an insecure XMLHttpRequest endpoint.

Mon serveur est sur Digital Ocean, a été configuré avec RunCloud et SSL est activé via LetsEncrypt.

L'application peut être consulté ici: https://vehicletrader.sweney.co/#/

S'il vous plaît noter qu'à ce stade, aucune autorisation Theres est autour de l'API.

Un conseil aiderait.

Answer 1

Une barre oblique / à la fin de l'URL de la requête était la cause de cela pour moi.

Mon appel axios était un simple axios.post(this.apiUrl() + '/hello/') où apiUrl() renvoie un lien https.

Localement, il fonctionnait mais sur le serveur prod derrière CloudFlare, il renvoyait une erreur insecure XMLHttpRequest endpoint car le résultat était diffusé sur http. Ce que j'ai remarqué dans l'onglet "Réseau" des outils de développement de mon navigateur, c'est que l'URL renvoie un 301 - Moved de manière permanente et juste après, l'erreur sur le point de terminaison non sécurisé. J'ai enlevé le / après /hello et boof, ça marche.

---

Ce que j'essayé avant d'enlever la dernière /:

1. Assurez-vous que Laravel est le protocole HTTPS est. (ne fonctionne pas)
2. Assurez-vous que baseURL de axios utilise https. (n'a pas fonctionné)
3. Url HTTPS de code dur. (n'a pas travaillé)
4. Utilisez get au lieu de post. (ne fonctionne pas)