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

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

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

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

MySQL

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

Node.js

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

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

解決済

Vueのメソッド実行をトリガーにExpress.jsからMySQLにデータ追加することは可能ですか?

Kotarom_24
Kotarom_24

総合スコア13

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

MySQL

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

Node.js

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

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

1回答

0評価

0クリップ

507閲覧

投稿2022/01/18 09:18

編集2022/02/22 15:58

前提・実現したいこと

Vue.js・Node.js(express.js)・MySQLを使った、画像をブラウザ上に表示するだけのサイトを作っています。
画像のデータ(URL・名前など)はMySQLに保存しておいて、Vueで表示するという流れです。

今回実現したいことは、axiosを使いhttp://localhost:8080/で画像を新規アップロードするボタンを押した時にPOST通信を行い、そのデータをhttp://localhost:3000/api/datasで受け取り、受け取ったデータをNode.js(express.js)で既に作成してあるMySQLに追加するというものです。

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

現在、詰まっているのはaxiosを使ってvueからNode.js(express.js)にデータをPOST通信して送るという点です。

http://localhost:8080からhttp://localhost:3000/api/datasへデータを送るためにpost通信を行うとこのエラーメッセージが表示されます。

GoogleChrome

Access to XMLHttpRequest at 'http://localhost:3000/api/datas' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

該当のソースコード

ソースコード全体像の説明:Vue.jsでプロジェクトを作成した後、ホームディレクトリ直下にserverディレクトリを作成しその中でNode.js(express.js)のコードを書いています。

Home/server

Node.js(express.js)

const express = require('express') const app = express() const mysql = require('mysql') --中略-- app.post('/api/datas', (req, res) => { res.set({ 'Access-Control-Allow-Origin': 'http://localhost:8080' }) console.log(req); console.log(res); })

上記のapp.post()を実行した時にエラーが出ます。

MySQLからVueにデータを引っ張ってくる際にもCORSエラーが発生したのですが、GET通信の場合は'Access-Control-Allow-Origin': 'http://localhost:8080'を追加すればエラーは消えます。


Home/src/components

Vue.js

<template> <div class="upload__container"> <h3>データの新規追加</h3> <form action="http://localhost:3000/api/datas" method="post"> <input class="upload__name" type="text" placeholder="名前を入力してください" v-model="name"> <label class="upload__file"> <input type="file" @change="upFile" ref="upImg"> </label> <button class="upload__button" :disabled="checkDataFull(name)" @click="addMysql(name)"></button> </form> </div> </template> <script> import axios from 'axios' export default { props: ["itemList"], data() { return { uploadedFile: "", uploadedFormat: "", email: "" } }, methods: { --中略-- // 画像データをまとめてPOST通信でNode.jsに送る addMysql(fileName) { const nums = this.itemList.length const addContent = { file_url: this.uploadedFile, file_name: fileName, file_format: this.uploadedFormat, file_id: nums, file_genre: "stock" } axios.post('http://localhost:3000/api/datas', { addDatas: addContent }) .then(res => { console.log(res); }) .catch(req => { console.log(req); }) this.uploadedFile = "" this.uploadedFormat = "" } } } </script>

vue.config.js

javascript

module.exports = { devServer: { proxy: { "/api": { target: "http://localhost:3000" } } } }

試したこと

①vue.config.js内にproxyを追加

Vue Cli公式サイトを参考にvue.config.jsにproxyを追加したがエラーメッセージが変わらなかった。
(vue.config.js変更後はnpm run serveで立ち上げ直しています。)

②proxy内に"/api"を追加

こちらの記事を参考に更に修正を加えたが変化ありませんでした。

③Node.js側のヘッダーに'Access-Control-Allow-Origin'を追加

res.set()ではなく、res.header()を使ってAccess-Contorol-Allow-Originを設定している方を参考に修正したが変化ありませんでした。

node.js

app.post('/api/datas', (req, res) => { res.header('Access-Control-Allow-Origin', 'http://localhost:8080') --中略-- })

補足情報(バージョン)

vue.js

  • @vue/cli 4.5.15
  • "axios": "^0.24.0"

Node.js

  • "Node": v14.18.1
  • "express": "^4.17.2"
  • "mysql": "^2.18.1"

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

MySQL

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

Node.js

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

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。