在 react native 中获取不会使用 codeIgniter API 发送帖子

Question

Fetch post 不适用于使用 codeIgniter 编码的 json api。 get 方法有效，但 post 方法存在问题。在 react native 和 code igniter 之间无法识别密钥。任何帮助表示赞赏。谢谢你

 fetch('http://zzz.com/login', {
   method: 'POST',
   headers: {
     Accept: 'application/json',
    'Content-Type': 'application/json', 
  },
  body: JSON.stringify({
     username: 'abc',
   }),
 })
 .then(response => response.json())
 .then(responseJson => {
   console.log('responseJson', responseJson);
 })
 .catch((error) => {
   console.error('fetchError', error);
 });

CodeIgniter 控制器

public function login()

{
    $un = $this->input->post('username'); //why doesn't the key 'username' is working here
    echo json_encode($un);
}

控制台日志：

responseJson false

更新：

1) 使用 json_decode，报错 “fetchError SyntaxError：JSON 输入意外结束”

public function login()
{
   $Data = json_decode(file_get_contents('php://input'), false);
     echo $Data;
 }

2) 使用 json_encode 会产生以下结果： responseJson {“用户名”：“abc”}

public function login()
{
   $Data = json_encode(file_get_contents('php://input'), false);
     echo $Data;
 }

更新 1：

1) 仅使用 file_get_contents 将输出为：responseJson {username: "abc"}

public function login()
{
    $Data = (file_get_contents('php://input'));
    echo $Data;
 }

2) 在服务器代码中使用 var_dump 和 json_decode，它会在应用程序控制台中出现以下错误

public function login()
{
    $Data = json_decode(file_get_contents('php://input'), true);
    var_dump ($Data);
 }

错误：

fetchError SyntaxError: Unexpected token a in JSON at position 0
    at parse (<anonymous>)
    at tryCallOne (E:\zzz\node_modules\promise\setimmediate\core.js:37)
    at E:\zzz\node_modules\promise\setimmediate\core.js:123
    at E:\zzz\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:295
    at _callTimer (E:\zzz\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:152)
    at _callImmediatesPass (E:\zzz\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:200)
    at Object.callImmediates (E:\zzz\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:464)
    at MessageQueue.__callImmediates (E:\zzz\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:320)
    at E:\zzz\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:135
    at MessageQueue.__guard (E:\zzz\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:297)

控制台记录响应如下在应用程序控制台中给出数组：

fetch('http://zzz.com/login', {
  method: 'POST',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },
   body: JSON.stringify({
     username: 'abc',
   })
})
.then((response) => console.log('response', response))

控制台：

response 
Response {type: "default", status: 200, ok: true, statusText: undefined, headers: Headers, …}
headers:Headers {map: {…}}
ok:true
status:200
statusText:undefined
type:"default"
url:"http://zzz.com/login"
_bodyInit:"array(1) {↵  ["username"]=>↵  string(3) "abc"↵}↵"
_bodyText:"array(1) {↵  ["username"]=>↵  string(3) "abc"↵}↵"
__proto__:Object

Answer 1

尝试添加same-origin模式如下：

fetch('http://zzz.com/login', {
   method: 'POST',
   credentials: 'same-origin',
   mode: 'same-origin',
   headers: {
     'Accept': 'application/json',
     'Content-Type': 'application/json', 
   },
   body: JSON.stringify({
     username: 'abc',
   }),
 })
 .then(response => response.json())
 .then(responseJson => {
   console.log('responseJson', responseJson);
 })
 .catch((error) => {
   console.error('fetchError', error);
 });