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

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');

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);
});

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!