Reactのfetchでのcorsクロスドメインリクエストの実装方法

この記事では、React の fetch での cors クロスドメイン リクエストの実装方法を主に紹介しますので、参考にしてください。

プロジェクトでは React が使用されており、ajax の代わりに fetch を使用する必要があります。

react の create_react_app ツールは非常に便利なので、基本的にはプロジェクトを作成して npm start コマンドを入力すると、自動的にポート 3000 をリッスンし、フロントエンド部分の準備が整います。

具体的な参照: https://github.com/facebookincubator/create-react-app

バックエンド部分には halcon を使用しました。

フロントエンドとバックエンドが分離されているため、便宜上、nginxで同じドメインにしようとしました（フロントエンドAPIとバックエンドAPIのトップレベルドメイン名は同じです） ) ですが、palcon フレームワークはシングルエントリであり、react が nginx リバースプロキシ経由で 3000 を監視すると、js が問題を見つけることができませんでしたというエラーメッセージが表示されるため、同じドメインを共有する計画は断念しました。

そこで、2 つのドメイン名を設定しました:

1、www.xxx.com
2、data.xxx.com

最初のドメイン名は反応部分に使用され、ポート番号は 3000 (デバッグ用、正式な起動は 80)
2 番目のドメイン名は API に使用され、ポート番号は 80 です

したがって、クロスドメインの問題が発生します。

cors の詳細については、http://www.jb51.net/article/102694.htm を参照してください。

以下は、クロスドメインのドメイン名アクセスを許可する PHP 部分の設定です

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

以下はフェッチ部分のajaxリクエストです

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

上記は私が皆さんのためにまとめたものです。

関連記事:

iview日付コントロール、双方向バインディング日付書式設定方法

iViewの時間コントロールで選択した時間が常に1日少ない問題を解決

IView の on-change 属性

以上がReactのfetchでのcorsクロスドメインリクエストの実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。