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

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

新規登録して質問してみよう
ただいま回答率
85.50%
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アプリケーションを提供します。

Q&A

解決済

1回答

1796閲覧

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

Kotarom_24

総合スコア25

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アプリケーションを提供します。

0グッド

0クリップ

投稿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

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

該当のソースコード

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

Home/server

Node.js(express.js)

1const express = require('express') 2const app = express() 3const mysql = require('mysql') 4 5--中略-- 6app.post('/api/datas', (req, res) => { 7 res.set({ 8 'Access-Control-Allow-Origin': 'http://localhost:8080' 9 }) 10 console.log(req); 11 console.log(res); 12}) 13

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

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


Home/src/components

Vue.js

1<template> 2 <div class="upload__container"> 3 <h3>データの新規追加</h3> 4 <form action="http://localhost:3000/api/datas" method="post"> 5 <input class="upload__name" type="text" placeholder="名前を入力してください" v-model="name"> 6 <label class="upload__file"> 7 <input 8 type="file" 9 @change="upFile" 10 ref="upImg"> 11 </label> 12 <button class="upload__button" :disabled="checkDataFull(name)" @click="addMysql(name)"></button> 13 </form> 14 </div> 15</template> 16 17<script> 18import axios from 'axios' 19 20export default { 21 props: ["itemList"], 22 data() { 23 return { 24 uploadedFile: "", 25 uploadedFormat: "", 26 email: "" 27 } 28 }, 29 methods: { 30 --中略-- 31 // 画像データをまとめてPOST通信でNode.jsに送る 32 addMysql(fileName) { 33 const nums = this.itemList.length 34 const addContent = { 35 file_url: this.uploadedFile, 36 file_name: fileName, 37 file_format: this.uploadedFormat, 38 file_id: nums, 39 file_genre: "stock" 40 } 41 axios.post('http://localhost:3000/api/datas', { 42 addDatas: addContent 43 }) 44 .then(res => { 45 console.log(res); 46 }) 47 .catch(req => { 48 console.log(req); 49 }) 50 this.uploadedFile = "" 51 this.uploadedFormat = "" 52 } 53 } 54} 55</script> 56

vue.config.js

javascript

1module.exports = { 2 devServer: { 3 proxy: { 4 "/api": { 5 target: "http://localhost:3000" 6 } 7 } 8 } 9}

試したこと

①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

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

補足情報(バージョン)

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"

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

うーん、なるほど……
神記事を見つけたのでこれ読んでください。
参考記事: なんとなく CORS がわかる...はもう終わりにする。 - Qiita

質問文をざっと読む限り、
Access-Control-Allow-Methodsの対応が不足しているんじゃないかなと思います。

初見で絶対気が付かない要因として
MethodのOPTIONSがあります。
参考記事: OPIONTS - MDN

Ajax/Fetchを使う際、一度情報収集をするんですけど
その時に裏でこっそり一度OPTIONSメソッドを使って通信を行い、結果を持ち帰って
対応しているMETHODならば本通信をしているとかしていないとか、そういう機能があります。

この辺が原因だろうと思うので、
まずAccess-Control-Allow-Methods POST, OPTIONSみたいな感じの指定をして挙動を確認してみてください。

投稿2022/01/18 11:34

miyabi-sun

総合スコア21158

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Kotarom_24

2022/01/18 18:21

丁寧に回答ありがとうございます!参考にさせていただきます。 追加で質問させていただきたいのですが、「Access-Control-Allow-Methods」を追加するのはNode.jsのapp.post()内という認識で合っていますか?
miyabi-sun

2022/01/18 22:05 編集

おっと、具体的に何すれば良いかの指示が無かったですね。 基本的にはOPTIONSもPOSTも全部やってください。 具体的な手順としては下記の記事が参考になるはずです。 記事名: express.jsのcors対応 https://qiita.com/chenglin/items/5e563e50d1c32dadf4c3 方法1のフルスクラッチで記述する方法を参照しつつ、 corsライブラリを使うのが良いですかね。 Express.jsはapp.getやapp.postしか用意されていませんが、 これに記述すれば裏で勝手にOPTIONSメソッド対応もやってくれるようです。 楽ちんですね。(ホンマか?) もし無理なら`app.use('/api/datas', cors())`という感じで特定のパスに対するミドルウェア適用が出来るのでそれ使ってください。 許可するドメインを絞る方法に関しては、 セキュアなサイトでの成りすまし・フィッシングサイト対策の側面が強いので、 基本的には*での運用で良いと思います。 もしくは環境変数やconfigファイル等で外から注入するような仕組みにしてください。 PS. 非常にどうでも良いですが、datumの複数形がdataなのでdatasはないですよ……! 私もやらかしたし、みんなやらかす奴……!
Kotarom_24

2022/02/22 05:33 編集

記事を参考にやったところ、CORSエラーは直ったんですが、MySQLにデータ追加することに失敗してしまいます。 datasのご指摘ありがとうございます。恥ずかしいのですぐに修正します笑
Kotarom_24

2022/02/22 06:58 編集

上記の記事を参考にやってみたらPOST通信普通にできました。 私はExpress・Nodeの前提知識0でやったのでとても時間がかかりました。基礎知識のある方ならすぐ解決できると思います。 app.use(function (req, res, next) { res.header('Access-Control-Allow-Origin', "*"); res.header('Access-Control-Allow-Headers', 'X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept'); res.header('Access-Control-Allow-Methods', 'POST, GET'); res.header('Access-Control-Allow-Credentials', true); next(); });
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問