Прежде всего, хочу сказать, что я прочитал около 12 подобных вопросов на StackOverflow, но ни один из них не помог мне решить мою проблему, и на большинство из них были довольно неясные ответы, поэтому я считаю, что этот вопрос стоит задать, также я только начинающий.

Окружающая обстановка:

У меня есть приложение для реагирования, работающее на localhost на порту 3000 и сервер Express на порту 8000. Мой сервер:

const express = require('express');
const app = express();

const port = 8000;

app.post('/register', (req, res) => {
    res.send(JSON.stringify({test: 'HELLO!'}));
});

const server = app.listen(port, () => console.info('Listening on port', server.address().port));

И клиент:

static register(username, password) {
    return fetch('http://localhost:8000/register', {
      method: 'POST',
      body: JSON.stringify({username, password}),
      headers: {'Content-Type': 'text/plain'}
    }).then(response => console.info(response));
  }

При отправке этого запроса я получил бы это сообщение об ошибке:

Failed to load http://localhost:8000/register: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

После некоторых исследований я попробовал несколько решений: Добавление этого промежуточного программного обеспечения перед «POST» на моем сервере:

app.all('/*', function(req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type');

  next();
});

Это не помогло, поэтому я попробовал пакет node КОРС, и все же это не решило мою проблему. Но что-то изменилось: вместо этого я больше не получал это сообщение об ошибке, я получал ответ в журнале, но вместо того, чтобы получать объект, который я отправил с сервера, я получал какой-то «объект ошибки»:

bodyUsed: false
headers: Headers {}
ok: true
redirected: false
status: 200
statusText: "OK"
type: "cors"
url: "http://localhost:8000/register"

Но когда я открыл вкладку сети в Chrome, я увидел, что ответ был таким, как я ожидал {test: HELLO!}, поэтому Chrome что-то менял, поэтому я отключил безопасность Chrome, но он все равно регистрировал тот же объект ошибки. Итак, попробовав все это, я не смог заставить свой код работать, поэтому может ли кто-нибудь полностью ответить, как отправлять запросы из приложения React на экспресс-сервер без получения ошибки cors?

Полный код сервера:

const express = require('express');
const cors = require('cors');
const app = express();

const port = 8000;

app.all('/*', function(req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type');

  next();
});

app.post('/register', (req, res) => {
    res.send(JSON.stringify({test: 'HELLO!'}));
});

const server = app.listen(port, () => console.info('Listening on port', server.address().port));