<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Node.js  |  ryo blog</title>
	<atom:link href="index.xml" rel="self" type="application/rss+xml" />
	<link>../../../index.html</link>
	<description>Web関連のあれこれと日記</description>
	<lastBuildDate>Tue, 24 Jul 2018 13:57:50 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=5.8.18</generator>

<image>
	<url>../../../wp-content/uploads/2018/07/cropped-512-4-100x100.png</url>
	<title>Node.js  |  ryo blog</title>
	<link>../../../index.html</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>ExpressでPOSTを受け取るとき</title>
		<link>../../../web/306/index.html</link>
					<comments>../../../web/306/index.html#respond</comments>
		
		<dc:creator><![CDATA[ryo4004]]></dc:creator>
		<pubDate>Tue, 24 Jul 2018 13:57:13 +0000</pubDate>
				<category><![CDATA[Web関連]]></category>
		<category><![CDATA[Express]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Node.js]]></category>
		<guid isPermaLink="false">https://blog.ryo4004.net/?p=306</guid>

					<description><![CDATA[JavaScriptで何らかのリクエストを送る、受け取るときって多いですが、 送信側 fetch APIでPOST 受信側 Express(Node.js) のときに、bodyが空っぽになっちゃって困った。 ってなったと [&#8230;]]]></description>
										<content:encoded><![CDATA[<p>JavaScriptで何らかのリクエストを送る、受け取るときって多いですが、<br />
送信側 fetch APIでPOST<br />
受信側 Express(Node.js)<br />
のときに、bodyが空っぽになっちゃって困った。<br />
ってなったときのメモです。</p>

  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-2" checked><label class="toc-title" for="toc-checkbox-2">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">fetch APIでリクエストを送信</a></li><li><a href="#toc2" tabindex="0">ExpressでPOSTを受け取る</a><ol><li><a href="#toc3" tabindex="0">準備</a></li><li><a href="#toc4" tabindex="0">ExpressでPOSTを受け取る</a></li><li><a href="#toc5" tabindex="0">最終的なコード</a></li></ol></li></ol>
    </div>
  </div>

<h2><span id="toc1">fetch APIでリクエストを送信</span></h2>
<p>おおむね<a href="https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch">MDN web docs (fetch 概説)</a>で紹介されているものと同じです。</p>
<pre><code class="javascript">fetch('リクエスト先URL', {
  method: 'POST',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    user: 'user',
    data: 'data'
  })
})
.then(response =&gt; {
  if (response.status === 200) {
    return response.json()
  } else {
    console.warn('Something went wrong on api server!');
  }
})
.then(json =&gt; {
  return callback(json)
})
.catch(error =&gt; {
  console.error(error);
})
</code></pre>
<h2><span id="toc2">ExpressでPOSTを受け取る</span></h2>
<h3><span id="toc3">準備</span></h3>
<p>ExpressでPOSTを受信するのはこんな感じです。</p>
<pre><code class="javascript">const express = require('express')
const app = express()
app.listen(3000)

app.post('/request', (req, res) =&gt; {
  console.log(req.body)
  res.send('OK')
})
</code></pre>
<h3><span id="toc4">ExpressでPOSTを受け取る</span></h3>
<p>さらにPOSTパラメータも受け取るにはbody-parserを使います。<br />
npmで入れてから、以下を追記します。</p>
<pre><code class="javascript">const bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({extended: true}))
app.use(bodyParser.json())
</code></pre>
<p>ここで、この一文を書かないと受信したbodyがからっぽになります。</p>
<pre><code class="javascript">app.use(bodyParser.json())
</code></pre>
<p>HTMLのformなどから送られるデータはurlencode形式ですが、上記したfetchで送られるPOSTデータはjson形式で送られるので、urlencodeとは別にjsonも初期化が必要です。</p>
<h3><span id="toc5">最終的なコード</span></h3>
<pre><code class="javascript">const express = require('express')
const app = express()

const bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({extended: true}))
app.use(bodyParser.json())

app.listen(3000)

app.post('/request', (req, res) =&gt; {
  console.log(req.body)
  res.send('OK')
})
</code></pre>
]]></content:encoded>
					
					<wfw:commentRss>../../../web/306/feed/index.xml</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
