Maison > interface Web > js tutoriel > le corps du texte

Méthode d'implémentation de la requête inter-domaines Cors dans Fetch In React

亚连
Libérer: 2018-05-30 14:01:49
original
5224 Les gens l'ont consulté

Cet article présente principalement la méthode d'implémentation de la requête inter-domaines cors dans fetch in React. Maintenant, je le partage avec vous et vous donne une référence.

React est utilisé dans le projet et fetch doit être utilisé à la place d'ajax.

Parce que l'outil create_react_app de React est très pratique, il peut essentiellement être utilisé immédiatement. Après avoir créé le projet et entré la commande npm start, il écoutera automatiquement un port 3000 et la partie frontale. est prêt.

Référence spécifique : https://github.com/facebookincubator/create-react-app

J'ai utilisé phalcon pour la partie backend.

En raison de la séparation du front-end et du back-end, pour plus de commodité, j'ai essayé d'en faire le même domaine dans nginx (les noms de domaine de premier niveau du front-end et du back-end). end api sont les mêmes), mais le framework phalcon est une entrée unique, et lorsque React Monitors 3000, via le proxy inverse nginx, il y avait un problème que js ne pouvait pas être trouvé, j'ai donc abandonné le plan du même domaine.

J'ai donc configuré deux noms de domaine :

1, www.xxx.com
2, data.xxx.com

Le premier nom de domaine utilisé pour la partie réaction, le numéro de port est 3000 (pour le débogage, le lancement officiel est 80)
Le deuxième nom de domaine est utilisé pour l'API, le numéro de port est 80

Il y a donc un cross-domain problème.

Pour une introduction détaillée aux cors, veuillez consulter : http://www.jb51.net/article/102694.htm

Voici les paramètres de la partie php qui permettent le cross- domaine accès au nom de domaine

  $origin    = isset($_SERVER['HTTP_ORIGIN'])?$_SERVER['HTTP_ORIGIN']:'';
  $allowOrigin = [
            'http://www.xxx.com',
            'http://xxx.com'
          ];
  if (in_array($origin, $allowOrigin)) {
    header('Access-Control-Allow-Origin: ' . $origin);
  }

  header('Access-Control-Allow-Methods: PUT,POST,GET,DELETE,OPTIONS');
  header('Access-Control-Allow-Credentials: true');
  header('Access-Control-Allow-Headers: Content-Type, Accept');
Copier après la connexion

Ce qui suit est la demande ajax pour la partie récupération

let postData = {a:'b'};
fetch('http://data.xxx.com/Admin/Login/login', {
  method: 'POST',
  mode: 'cors',
  credentials: 'include',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  body: JSON.stringify(postData)
}).then(function(response) {
  console.log(response);
});
Copier après la connexion

Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Contrôle de date iview, méthode de format de date de liaison bidirectionnelle

Résolution de la sélection de contrôle du temps dans iView Le problème de toujours manquer un jour

Explication détaillée basée sur l'utilisation de l'attribut on-change dans IView

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!

Étiquettes associées:
source:php.cn
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal