如何修复 REDCap API request which returns 403 with Javascript 但适用于其他语言

Question

解决方案：

function REDCapImportRecord() {
  const url = 'https://redcap.INSTITUTION.edu/api/'

  const testdata = [{
    record_id: 'TEST123456',
    testfield: 'test'
  }]

  const body = new FormData();
  body.append('token', 'MYTOKEN');
  body.append('content', 'record');
  body.append('format', 'json');
  body.append('data', JSON.stringify(testdata));

  const params = {
    method: 'POST',
    body,
  }

return fetch(url, params)
  .then(data => {
    console.log('fetch data: ', data)
  })
  .catch(error => console.log('Error: ', error))
}

原问题：

我正在创建一个 React Native 应用程序来与 REDCap 交互，但在使用 Javascript 中的 API 时遇到困难。

我已经在 REDCap 上启用了所有权限，并且我能够使用 PHP 和在 REDCap API 游乐场中成功拨打电话。

对于应用程序，我使用的是 fetch：

async function REDCapImport() {
  const url = 'https://redcap.med.INSTITUTION.edu/api/'

  const testdata = {
    record_id: 'TEST1234',
    test_field: 'TEST'
  }

  const params = {
    method: 'POST',
    token: 'MYTOKEN',
    content: 'record',
    format: 'json',
    type: 'flat',
    overwriteBehavior: 'normal',
    forceAutoNumber: false,
    data: JSON.stringify(testdata),
    returnContent: 'count',
    returnFormat: 'json',
  }

  return await fetch(url, params)
    .then(data => {
      console.log('fetch data: ', data)
    })
    .then(response => console.log('Response: ', response))
    .catch(error => console.log('Error: ', error))
  }

}

这是有效的 PHP：

<?php
$data = array(
    'token' => 'MYTOKEN',
    'content' => 'record',
    'format' => 'json',
    'type' => 'flat',
    'overwriteBehavior' => 'normal',
    'forceAutoNumber' => 'false',
    'data' => $testdata,
    'returnContent' => 'count',
    'returnFormat' => 'json'
);
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, 'https://redcap.med.upenn.edu/api/');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_VERBOSE, 0);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
curl_setopt($ch, CURLOPT_AUTOREFERER, true);
curl_setopt($ch, CURLOPT_MAXREDIRS, 10);
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'POST');
curl_setopt($ch, CURLOPT_FRESH_CONNECT, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($data, '', '&'));
$output = curl_exec($ch);
print $output;
curl_close($ch);

我收到 403 错误：

似乎即使在 params 对象中，如果我删除 API 标记，它也不会改变错误——它仍然是 returns 403.

它在 PHP 中工作得很好，所以我觉得我做错了什么，因为我的令牌和权限确实有效。

任何有关如何使此请求在 Javascript 中工作的帮助将不胜感激。谢谢！

Answer 1

您将数据放在 js 中的错误位置。 fetch() 方法的第二个参数是设置对象而不是直接数据对象。您的数据需要进入该设置对象的属性，特别是 body 属性。它可以是几种不同的结构 blob、FormData、查询字符串等。

所以你会做这样的事情：

let data = new FormData();
data.append('token','your token');
data.append('format','json');
data.append('data',JSON.stringify(testData));
/* etc, keep appending all your data */

let settings={
  method:'post',
  body:data
};
fetch('url',settings)

如何修复 REDCap API request which returns 403 with Javascript 但适用于其他语言

How to fix REDCap API request which returns 403 with Javascript but works with other languages

javascript

reactjs

react-native

redcap