[已解决] GET fetch request ReactJS 的 JavaScript-ReactJS 问题

Question

我正在尝试从 ReactJS 应用程序向 Node.js API 发出基本 GET 请求，但我收到状态为 304 的响应。我需要获得 200 状态才能将 GET 的响应保存在变量中。 （我在 3000 端口运行 Reactjs 应用，在 3300 端口运行 Nodejs API）

节点 API：

app.get('/serviciosextras', async (req, res) => {
let connection;
console.log(('Servicios Extras'));

try {
    connection = await oracledb.getConnection({
        user: 'portafolio',
        password: '123',
        connectString: "localhost:1521/orcl"
    });

    const result = await connection.execute(
        `SELECT  dep.id_departamento,
                 se.id_servicio,
                 se.precio_servicio            
         FROM departamento_servicio_detalle dsd
         JOIN departamento DEP ON (dsd.id_departamento = dep.id_departamento)
         JOIN servicio_extra SE ON (dsd.id_servicio = se.id_servicio)
         ORDER BY 1 ASC`
    )

    const resultSet = result.rows;

    let lista = [];

    resultSet.map(obj => {
        let serviciosSchema = {
            'id_departamento': obj[0],
            'id_servicio': obj[1],
            'precio_servicio': obj[2]
        }
        lista.push(serviciosSchema);
    });

    console.log(lista);

    res.json(lista);

    connection.close();
} catch (err) {
    console.error(err);
}
});

来自 Reactjs 的 GET 请求

const getExtraServices = () => {
let endpoint = `${URL}serviciosextras`;

const requestOptions = {
  method: "GET",
  mode: 'no-cors'
  // headers: {
  //   "Content-Type": "application/json",
  //   Accept: "application/json"
  // },
};
console.log(endpoint);

fetch(endpoint, requestOptions)
  .then((res, err) => {
    console.log(res);
  })
  .then(result => {
    console.log('fue aqui');
    console.log(result);
  })
  .catch(err => {
    console.log('ERROR');
    console.log(err);
  })
}

我从这个按钮调用方法：(onClick={getExtraServices()})

<Fab onClick={(e) => {
              e.preventDefault();
              getExtraServices();
            }} variant="extended">
              <NavigationIcon style={{marginRight: 'theme.spacing(1)'}} />
                Navigate
            </Fab>

所以...我得到了这个： Firefox Console when I clicked button to call getExtraServices() res 未定义

Network console of GET request 我收到了响应，但状态是 304，所以我无法从代码中获取此信息。 ：/

Console of Nodejs API 这个console.log 如果来自console.log(lista) 之前发送res.json(lista)

有人知道我该如何解决这个问题吗？我需要获取 GET 请求的响应以在 ReactJS 应用程序中收取列表费用，但我不能，因为响应中有 body:null。

解决方案：我知道为什么但是发送没有标头的请求并使用方法 :POST 问题已解决。

Answer 1

错误 304 不是问题。

您似乎缺少将响应转换为 JSON 的语句。

这是一个来自 MDN 的示例：

fetch('https://example.com/profile', {
  method: 'POST', // or 'PUT'
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data),
})
.then(response => response.json())
.then(data => {
  console.log('Success:', data);
})
.catch((error) => {
  console.error('Error:', error);
});

特别是：

.then(response => response.json())

在您的代码中：

fetch(endpoint, requestOptions)
  .then((res, err) => {
    console.log(res); // logging res
    // no data being returned here
  })
  .then(result => {
    console.log('fue aqui');
    console.log(result); // therefore result is undefined
  })
  .catch(err => {
    console.log('ERROR');
    console.log(err);
  })