502 ошибка при отправке почтового запроса в приложение, работающее на ngrok

Question

У меня есть приложение реакции внешнего интерфейса, которое я запускаю локально с ngrok, и из этого я пытаюсь отправить запрос на извлечение сообщений на сервер, добавленный в проект, - приложение реакции, содержащееся в папке клиента и на экспресс-сервере. содержится в папке сервера.

Таким образом, клиентский запрос на выборку действительно попадает на конечную точку сервера, поскольку он утешает пустое тело, а на ngrok он говорит POST /, но не дает статуса !? , Тем не менее, во внешнем интерфейсе выдается ошибка 502 неверного запроса и ошибка CORS. Я попытался включить CORS с обеих сторон:

вот код (консоли работают):

Клиент:

  storeEmailData(domain, emailAddress, email, storeName) {

console.log('consoling the data IN API FILE' + domain);
console.log('consoling the data IN API FILE' + emailAddress);
fetch('https://3ecec55f.ngrok.io/', { 
  method: 'POST',
  mode: 'cors',
  data: {
    domain: domain,
    emailAddress: emailAddress,
    email: email,
    storeName: storeName,

  }

}, {mode: 'cors'} )

.then(function(response) {
  console.log('response' + response);
}).then(function(body) {
  console.log(body);
});
}

Сервер:

var app = express();
var db = require('./data_db.js')
var cors = require('cors');
app.use(cors());
var bodyParser = require('body-parser')

app.use(bodyParser.json())

app.post('/', function (req, res) {
   console.log('the data' + JSON.stringify(req.body))


});

Так что сервер просто утешает пустое тело. Здесь в интерфейсе ошибки:

api.js:25 POST https://3ecec55f.ngrok.io/ 502 (Bad 
Gateway)
storeEmailData @ api.js:25
ReturnsSettings._this.saveDetails @ ReturnsSettings.js:45
onClick @ ReturnsSettings.js:66
settings:1 Access to fetch at 'https://3ecec55f.ngrok.io/' 
from origin 'https://c2bca71d.ngrok.io' has been blocked 
by CORS policy: No 'Access-Control-Allow-Origin' header is 
present on the requested resource. If an opaque response 
serves your needs, set the request's mode to 'no-cors' to 
fetch the resource with CORS disabled.
settings:1 Uncaught (in promise) TypeError: Failed to 
fetch

любая помощь будет принята с благодарностью, спасибо !!

Answer 1

Есть несколько проблем с этим вызовом fetch, не в последнюю очередь то, что ваш сервер ожидает, что вы отправите JSON, но вы этого не делаете. Вы передали простой объект в качестве параметра data в fetch, но fetch не поддерживает это . Вы, вероятно, имели в виду body, но допустимые опции для body:

body: Любое тело, которое вы хотите добавить к вашему запросу: это может быть Blob, BufferSource, FormData, URLSearchParams или USVString объект.

Ничего не догадается, что вы отправляете JSON.

В целом, проблемы:

1. Использование data вместо body.
2. Использование объекта вместо строки (JSON = строка).
3. Не идентифицирует Content-Type (чтобы сказать, что вы отправляете JSON), поэтому будет принята форма в кодировке URI по умолчанию.
4. Передача третьего аргумента fetch, но fetch принимает только два.
5. Не проверяется на отсутствие сбоя fetch. ( Многие людей совершают эту ошибку, поэтому я написал ее в моем анемичном небольшом блоге.)
6. Не извлекается тело ответа fetch.

Исправление тех:

fetch('https://3ecec55f.ngrok.io/', { 
  method: 'POST',
  mode: 'cors',
  headers: {                                       // *** 3
    "Content-Type": "application/json"             // *** 3
  }                                                // *** 3
  body: JSON.stringify({                           // *** 1, 2
    domain: domain,
    emailAddress: emailAddress,
    email: email,
    storeName: storeName,
  })                                               // *** 2
})                                                 // *** 4
.then(function(response) {
  if (!response.ok) {                              // *** 5
    throw Error("HTTP status " + response.status); // *** 5
  }                                                // *** 5
  return response.xyz();                           // *** 6
}).then(function(body) {
  console.log(body);
});

... где xyz равно text, json, blob, arrayBuffer или formData в зависимости от ответа вашего сервера.

Примечание: вам не нужна опция mode. Когда вы передаете строку в качестве первого аргумента, режим по умолчанию равен "cors" (немного сложно найти это там, но оно есть). (Но вы, возможно, захотите сделать это как акцент для любых читателей кода, которые могут этого не знать.)