質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

POST

POSTはHTTPプロトコルのリクエストメソッドです。ファイルをアップロードしたときや入力フォームが送信されたときなど、クライアントがデータをサーバに送る際に利用されます。

受付中

node.jsでPOSTの値を受け取れるようにしたいです。

harigoE8
harigoE8

総合スコア10

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

POST

POSTはHTTPプロトコルのリクエストメソッドです。ファイルをアップロードしたときや入力フォームが送信されたときなど、クライアントがデータをサーバに送る際に利用されます。

1回答

0評価

0クリップ

356閲覧

投稿2021/12/19 07:30

前提・実現したいこと

node.jsでお問合せフォームの作成。

発生している問題・エラーメッセージ

入力フォームを作り、送信しても遷移先のページで値を受け取れていません。
パスも変えたりなど試しましたが、さっぱり原因が分からない状況です。
まだファイル構成やどこが作用しているのかなど理解ができていない為このような問題に直面しております。

参考になるサイトやアドバイスを頂けますと助かります。

送信すると ↓ が出ます。 Cannot POST /post.html

該当のソースコード

sample/src/ejs/contact/index.ejs(入力フォーム)

<% var title = "contact"; var description = "お問合せページのdescription"; %> <% include src/ejs/template/_head %> <!-- prettier-ignore --> <!-- 問合せフォーム ▼ここから▼ --> <form action="/post.html" method="POST" onsubmit="return verifyContactForm();"> <div class="form-group"> <label for="guest_name">お名前 : </label> <input id="guest_name" class="form-control" placeholder="(例)山田 太郎" /> </div> <div class="form-group"> <label for="guest_email">メールアドレス : </label> <input id="gurst_email" class="form-control" placeholder="(例)example.com" /> </div> <div class="form-group"> <label for="mail_subject">件名 : </label> <input type="text" id="mail_subject" class="form-control" placeholder="(例)javascriptについて" /> </div> <div class="form-group"> <label for="mail_body">本文 : </label> <textarea id="mail_body" class="form-control" placeholder="※お問合せ内容をご記載ください。" ></textarea> </div> <div class="form-group text-right"> <button class="btn btn-primary" >送信</button> </div> </form> <% include src/ejs/template/_footer %>

/sample/src/ejs/contact/post.ejs(受け取り先)

<% var title = "contact"; var description = "お問合せページのdescription"; %> <% include src/ejs/template/_head %> <% var guest_name = $_POST['guest_name'] %> <!-- prettier-ignore --> <script type="text/javascript"> console.log($guest_name); </script> <% include src/ejs/template/_footer %>

試したこと

routerやwebpackの所の設定かと思い、いじってみましたが変化がないので
初期の状態に戻しました。

sample/src/js/modules/Router.js

import Home from '../pages/Home' import About from '../pages/About' export default class Router { constructor() { this.model = { pathName: location.pathname, } this.initRouting() } initRouting() { const pathName = this.model.pathName switch (pathName) { case '/': new Home() break case '/about': new About() break default: break } } }

sample/webpack.config.js

const webpack = require('webpack') const path = require('path') const UglifyJSPlugin = require('uglifyjs-webpack-plugin') const HtmlWebpackPlugin = require('html-webpack-plugin') const CleanWebpackPlugin = require('clean-webpack-plugin'); const CopyWebpackPlugin = require('copy-webpack-plugin') const globImporter = require('node-sass-glob-importer') const MiniCssExtractPlugin = require('mini-css-extract-plugin') module.exports = (env, argv) => { const PRODUCTION = argv.mode === 'production' return { entry: './src/js/index.js', output: { filename: PRODUCTION ? 'assets/javascripts/bundle[hash].js' : 'assets/javascripts/bundle.js', path: path.join(__dirname, 'public'), }, plugins: [ new CleanWebpackPlugin([ 'public/assets/stylesheets', 'public/assets/javascripts', ]), new MiniCssExtractPlugin({ filename: PRODUCTION ? 'assets/stylesheets/bundle[hash].css' : 'assets/stylesheets/bundle.css', }), // ejs new HtmlWebpackPlugin({ filename: 'index.html', template: 'src/ejs/index.ejs', }), new HtmlWebpackPlugin({ filename: 'about/index.html', template: 'src/ejs/about/index.ejs', }), new HtmlWebpackPlugin({ filename: 'introduction/index.html', template: 'src/ejs/introduction/index.ejs', }), new HtmlWebpackPlugin({ filename: 'contact/index.html', template: 'src/ejs/contact/index.ejs', }), new HtmlWebpackPlugin({ filename: 'contact/post.html', template: 'src/ejs/contact/post.ejs', }), new HtmlWebpackPlugin({ filename: 'work/index.html', template: 'src/ejs/work/index.ejs', }), new HtmlWebpackPlugin({ filename: '404.html', template: 'src/ejs/404/index.ejs', }), // php new CopyWebpackPlugin( PRODUCTION ? [ { from: './src/api/*.php', to: path.resolve(__dirname, 'public/api'), flatten: true, }, ] : [] ), ], resolve: { extensions: [ '.js', // for style-loader ], }, devtool: PRODUCTION ? 'none' : 'source-map', optimization: { minimizer: PRODUCTION ? [ new UglifyJSPlugin({ uglifyOptions: { compress: { drop_console: true, }, }, }), ] : [], }, module: { rules: [ { test: /.ejs$/, use: 'ejs-compiled-loader', }, { test: /.scss$/, use: [ MiniCssExtractPlugin.loader, // javascriptとしてバンドルせず css として出力する { loader: 'css-loader', options: { url: false,// sassで相対パスを書けるようにする sourceMap: true, }, }, { loader: 'postcss-loader', options: { sourceMap: true, plugins: [ require('cssnano')({ preset: 'default', }), require('autoprefixer')({ grid: true }), ], }, }, { loader: 'sass-loader', options: { importer: globImporter(), sourceMap: true, }, }, ], }, { test: /.js$/, exclude: /node_modules/, use: [ { loader: 'babel-loader', options: { presets: [['@babel/preset-env', { modules: false }]], }, }, ], }, { enforce: 'pre', test: /.js$/, exclude: /node_modules/, loader: 'eslint-loader', }, ], }, devServer: { contentBase: path.resolve(__dirname, 'public'), port: 8080, }, } }

補足情報(FW/ツールのバージョンなど)

node v12.6.0
npm 6.9.0
webpack 5.65.0

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

POST

POSTはHTTPプロトコルのリクエストメソッドです。ファイルをアップロードしたときや入力フォームが送信されたときなど、クライアントがデータをサーバに送る際に利用されます。