react中fetch之cors跨域請求的實現方法，reactcors

react中fetch之cors跨域請求的實現方法，reactcors

項目中使用了react，當中需要使用fetch來代替ajax。

由於react的create_react_app工具很方便，基本上開箱即用，經過建立項目，輸入npm start命令後，便自動監聽一個3000的連接埠，到此前端部分就緒。

具體參考：https://github.com/facebookincubator/create-react-app

後端部分我使用了phalcon。

由於前後端分離，為了方便，我嘗試在nginx中使之同域（前端和後台api的頂級網域名稱相同），但phalcon架構是單入口、react監聽3000時候，通過nginx反向 Proxy，出現js找不到的問題，於是放棄同域的打算。

因此我配置了兩個網域名稱：

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

第一個網域名稱用於react部分，連接埠號碼是3000（調試用，正式上線是80）
第二個網域名稱用於api，連接埠號碼是80

於是乎出現跨域問題。

cors詳細的介紹請看：http://www.bkjia.com/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');

以下是fetch部分的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);});

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。