获取 (POST) 时遇到未处理的拒绝 (TypeError)

Question

我遵循修改后的 JSON Forms tutorial 但是在添加我自己的代码以便 post 将表单数据发送到 REST 端点时遇到问题。

表格加载正常，我可以用数据填写它。

我收到 未处理的拒绝 (TypeError)：无法获取 单击“提交”按钮时。我正在检查 REST 服务日志，请求没有到达我的控制器。

这是我的 App.js 代码：

import './App.css';
import { person } from '@jsonforms/examples';
import {
  materialRenderers,
  materialCells,
} from '@jsonforms/material-renderers';
import React, { useState } from 'react';
import { JsonForms } from '@jsonforms/react';
import { Button } from 'react-bootstrap';

const schema = person.schema;
const uischema = person.uischema;
const initialData = person.data;    

function App() {

  const [data, setData] = useState(initialData);
    
  const sendData = () => 
    fetch('http://localhost:8080/message', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    });

  return (
    <div className='App'>
      <JsonForms
        schema={schema}
        uischema={uischema}
        data={data}
        renderers={materialRenderers}
        cells={materialCells}
        onChange={({ data, _errors }) => setData(data)}
      />
      <Button onClick={() => sendData()} color='primary'>
        Submit
      </Button>
    </div>
  );
}

export default App;

REST 端点已启动，运行并完美回答...

curl --location --request POST 'http://localhost:8080/message' \
--header 'Content-Type: application/json' \
--data-raw '{
  "name": "John Doe",
  "birthDate": "1985-06-02",
  "personalData": {
    "age": 34,
    "height": 5.9
  },
  "occupation": "Programmer"
}'

有什么想法是错误的吗？

Answer 1

你可以这样试试吗？如果尚未解决，则可能是 CORS 错误问题。您需要在 API 上启用 cors，您查看更多关于 CORS

示例：

    const sendData = async () =>  {
        const requestOptions = {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(data),
        };
        const response = await fetch('http://localhost:8080/message', requestOptions);
        const data = await response.json();
        console.log(data)
     }

获取 (POST) 时遇到未处理的拒绝 (TypeError)

Getting an unhandled Rejection (TypeError) while fetching (POST)

node.js

reactjs

jsonforms