Implementierungsmethode der domänenübergreifenden Cors-Anfrage beim Abrufen in React

In diesem Artikel wird hauptsächlich die Implementierungsmethode für domänenübergreifende Cors-Anfragen in Fetch in React vorgestellt. Jetzt teile ich sie mit Ihnen und gebe sie als Referenz.

React wird im Projekt verwendet und Fetch muss anstelle von Ajax verwendet werden.

Da das create_react_app-Tool von React sehr praktisch ist, kann es grundsätzlich sofort verwendet werden. Nach dem Erstellen des Projekts und der Eingabe des npm-Startbefehls überwacht es automatisch einen Port 3000 und den Front-End-Teil ist fertig.

Spezifische Referenz: https://github.com/facebookincubator/create-react-app

Ich habe Phalcon für den Backend-Teil verwendet.

Aufgrund der Trennung von Front-End und Back-End habe ich der Einfachheit halber versucht, sie in Nginx zur gleichen Domäne zu machen (die Top-Level-Domänennamen von Front-End und Back-End). Die End-API ist dieselbe), aber das Phalcon-Framework ist ein einzelner Eintrag, React Monitoring 3000, über den Nginx-Reverse-Proxy gab es ein Problem, dass js nicht gefunden werden konnte, also habe ich den Plan derselben Domäne aufgegeben.

Also habe ich zwei Domänennamen konfiguriert:

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

Der erste verwendete Domänenname Für den Reaktionsteil ist die Portnummer 3000 (zum Debuggen ist sie offiziell gestartet 80)
Der zweite Domänenname wird für die API verwendet, die Portnummer ist 80

Es liegt also eine domänenübergreifende Verbindung vor Problem.

Eine ausführliche Einführung in cors finden Sie unter: http://www.jb51.net/article/102694.htm

Im Folgenden sind die Einstellungen im PHP-Teil aufgeführt, die eine Cross- Domänenzugriff auf Domänennamen

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

Das Folgende ist die Ajax-Anfrage für den Abrufteil

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

Das Obige habe ich für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

iview-Datumskontrolle, bidirektionale verbindliche Datumsformatmethode

Lösen der Zeitkontrollauswahl in iView Das Problem, immer einen Tag zu verpassen

Detaillierte Erklärung basierend auf der Verwendung des On-Change-Attributs in IView

Das obige ist der detaillierte Inhalt vonImplementierungsmethode der domänenübergreifenden Cors-Anfrage beim Abrufen in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!