Maison interface Web js tutoriel Comment puis-je effectuer des requêtes POST inter-domaines en JavaScript à l'aide de CORS ?

Comment puis-je effectuer des requêtes POST inter-domaines en JavaScript à l'aide de CORS ?

Dec 16, 2024 pm 08:01 PM

How Can I Make Cross-Domain POST Requests in JavaScript using CORS?

Envoi de requêtes POST inter-domaines via JavaScript

Les requêtes inter-domaines sont un défi courant dans le développement Web. En JavaScript, il existe plusieurs façons d'envoyer une requête POST inter-domaines, mais l'une des méthodes les plus simples consiste à tirer parti de la norme « Cross-Origin Resource Sharing » (CORS).

Configuration CORS sur le Serveur

Activer CORS sur le serveur qui recevra la requête POST par :

  1. Ajout des en-têtes de réponse suivants :

    • Access-Control-Allow-Origin : from.com (remplacez from.com par l'origine du demande)
    • Access-Control-Allow-Methods : POST
    • Access-Control-Max-Age : 1000
    • Access-Control-Allow-Headers : Content-Type, Authorization, X-Requested-With

POST inter-domaines via JavaScript

En JavaScript, vous pouvez utiliser l'API fetch pour envoyer un POST inter-domaines request :

fetch('https://to.com/postHere.php', {
  method: 'POST',
  mode: 'cors',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ some: 'json' })
})
  .then(response => response.json())
  .then(responseData => {
    console.log(responseData.someKey);
  })
  .catch(error => {
    console.error('POST failed', error);
  });
Copier après la connexion

Ce code effectue une requête POST à ​​https://to.com/postHere.php depuis une origine différente (from.com). Il définit les en-têtes nécessaires pour CORS et chaîne le corps de la requête au format JSON.

Gestion des requêtes OPTIONS

Lorsqu'un client envoie une requête POST inter-domaines, le navigateur commence par envoie une requête OPTIONS au serveur pour vérifier si le serveur prend en charge la requête. Le serveur doit répondre à cette requête avec les en-têtes CORS appropriés pour indiquer que la requête POST est autorisée.

Considérations

  • Cette méthode nécessite la prise en charge de CORS sur le serveur.
  • La requête fera deux requêtes au serveur : une requête OPTIONS suivie du POST demande.
  • CORS peut ne pas fonctionner sur tous les appareils, en particulier les appareils mobiles.

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article chaud

Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Article chaud

Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Remplacer les caractères de chaîne en javascript Remplacer les caractères de chaîne en javascript Mar 11, 2025 am 12:07 AM

Remplacer les caractères de chaîne en javascript

Tutoriel de configuration de l'API de recherche Google personnalisé Tutoriel de configuration de l'API de recherche Google personnalisé Mar 04, 2025 am 01:06 AM

Tutoriel de configuration de l'API de recherche Google personnalisé

Exemple Couleurs Fichier JSON Exemple Couleurs Fichier JSON Mar 03, 2025 am 12:35 AM

Exemple Couleurs Fichier JSON

8 Superbes plugins de mise en page JQuery Page 8 Superbes plugins de mise en page JQuery Page Mar 06, 2025 am 12:48 AM

8 Superbes plugins de mise en page JQuery Page

10 Highlighters de syntaxe jQuery 10 Highlighters de syntaxe jQuery Mar 02, 2025 am 12:32 AM

10 Highlighters de syntaxe jQuery

Créez vos propres applications Web Ajax Créez vos propres applications Web Ajax Mar 09, 2025 am 12:11 AM

Créez vos propres applications Web Ajax

Qu'est-ce que & # x27; ceci & # x27; en javascript? Qu'est-ce que & # x27; ceci & # x27; en javascript? Mar 04, 2025 am 01:15 AM

Qu'est-ce que & # x27; ceci & # x27; en javascript?

10 tutoriels JavaScript & jQuery MVC 10 tutoriels JavaScript & jQuery MVC Mar 02, 2025 am 01:16 AM

10 tutoriels JavaScript & jQuery MVC

See all articles