Pourquoi est-ce que je reçois une erreur CORS lorsque mon côté serveur autorise l'origine avec une barre oblique finale ?

Pourquoi est-ce que je reçois une erreur CORS même si j'ai autorisé l'origine https://example.com/?

Comprendre les origines CORS

Le partage de ressources cross-origine (CORS) est un mécanisme qui restreint les requêtes cross-originales provenant de sites Web tiers afin de protéger les données sensibles. Une origine est représentée par une combinaison du protocole, du domaine et du port.

Le problème de la barre oblique finale

Le problème clé ici est la présence d'une barre oblique finale dans l'origine autorisée. .

Les origines Web ne contiennent pas de barres obliques finales. Par conséquent, l'origine suivante n'est pas valide :

<code class="text">https://googledocs-clone-sbayrak.netlify.app/</code>

L'origine correcte, sans la barre oblique finale, est :

<code class="text">https://googledocs-clone-sbayrak.netlify.app</code>

Configuration Socket.IO CORS

Dans Socket .IO, vous utilisez le package cors Node.js pour la gestion CORS. Ce package nécessite une correspondance exacte entre l'origine de la requête et la valeur d'origine configurée dans les paramètres CORS. Avec une barre oblique finale dans l'origine, la comparaison échoue et aucun en-tête Access-Control-Allow-Origin n'est défini dans la réponse.

Votre code côté serveur

Votre fichier server.js a Middleware CORS configuré comme suit :

<code class="javascript">const io = socketio(server, {
  cors: {
    origin: 'https://googledocs-clone-sbayrak.netlify.app/',
    methods: ['GET', 'POST'],
  },
});</code>

Supprimez la barre oblique finale de la valeur d'origine.

Demande frontale

Dans votre code frontend, le la connexion socket est effectuée à l'adresse suivante :

<code class="javascript">const s = io('https://googledocs-clone-sbayrak.herokuapp.com/');</code>

En utilisant la valeur d'origine correcte sans la barre oblique finale, l'erreur CORS ne devrait plus se produire.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!