JS Sapper: отправка данных на сервер (правильный путь?)

Я использую Sapper + Svelte для веб-сайта, это действительно потрясающе! В моем компоненте контактной формы данные отправляются на сервер. Вот как это делается без iframe. Отправленные и полученные данные находятся в формате JSON.

На стороне клиента (компонент):

var data = { ...my contact JSON data... }
var url = '/process/contact' // associated script = /src/routes/process/contact.js

fetch(url, {
  method: 'POST',
  body: JSON.stringify(data),
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(r => {
  r.json()
    .then(function(result) {
      // The data is posted: do something with the result...
    })
})
.catch(err => {
  // POST error: do something...
  console.log('POST error', err.message)
})

На стороне сервера:

скрипт = /src/routes/process/contact.js

export async function post(req, res, next) {
  /* Initializes */
  res.setHeader('Content-Type', 'application/json')
  /* Retrieves the data */
  var data = req.body
  // Do something with the data...
  /* Returns the result */
  return res.end(JSON.stringify({ success: true }))
}

Надеюсь, это поможет!

Вместе с решением, приведенным выше, вы можете получить undefined при попытке прочитать опубликованные данные на стороне сервера.

Если вы используете стандартную версию Sapper, вы используете Polka. Чтобы включить анализ тела в Польке, вы можете сделать следующее.

npm install body-parser

В server.js добавьте следующее

const { json } = require('body-parser');

И под polka() добавить импортированный

.use(json())

Чтобы он в конце концов сказал что-то вроде

...
const { json } = require('body-parser');

polka() // You can also use Express
    .use(json())
    .use(
        compression({ threshold: 0 }),
        sirv('static', { dev }),
        sapper.middleware()
    )
    .listen(PORT, err => {
        if (err) console.log('error', err);
    });