前提・実現したいこと
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"
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/01/18 18:21
2022/01/18 22:05 編集
2022/02/22 05:33 編集
2022/02/22 06:58 編集