前提・実現したいこと
現在、Vue.js + Firebase functionsでお問い合わせフォームを作成する
こちらを参考に Nuxt.js+Firebaseで、お問い合わせフォームを作成しています。
実際にフォームは作成できましたが、フォームに問い合わせ内容を入力し送信したところ
以下のエラーが発生したので解決したいです。
発生している問題・エラーメッセージ
Access to fetch at 'https://~' from origin 'http://localhost:3000' 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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Failed to load resource: net::ERR_FAILED
該当のソースコード
functions
1const functions = require('firebase-functions') 2const nodemailer = require('nodemailer') 3const gmailEmail = functions.config().gmail.email 4const gmailPassword = functions.config().gmail.password 5const adminEmail = functions.config().admin.email 6 7// 送信に使用するメールサーバーの設定 8const mailTransport = nodemailer.createTransport({ 9 service: 'gmail', 10 auth: { 11 user: gmailEmail, 12 pass: gmailPassword 13 } 14}) 15 16// 管理者用メールアドレス 17const adminContents = (data) => { 18 return `I received a contact from the website with the following contents. 19 20name: 21${data.name} 22 23email: 24${data.email} 25 26contents: 27${data.contents} 28` 29} 30 31exports.sendMail = functions.https.onCall((data, context) => { 32 // メール設定 33 const adminMail = { 34 from: gmailEmail, 35 to: adminEmail, 36 subject: 'contact form', 37 text: adminContents(data) 38 } 39 40 // 管理者へのメール送信 41 mailTransport.sendMail(adminMail, (err, info) => { 42 if (err) { 43 return console.error(`admin send failed. ${err}`) 44 } 45 return console.log('admin and send success.') 46 }) 47})
試したこと
FirebaseのCloud FunctionsでCORSがとかAccess-Control-Allow-Originがと言われたらこれ
こちらを参考に、改めて functions/index.js内該当ソースコード
functions
1exports.sendMail = functions.https.onCall((data, context) => { 2 // メール設定 3 const adminMail = { 4 from: gmailEmail, 5 to: adminEmail, 6 subject: 'contact form', 7 text: adminContents(data) 8 } 9 10 // 管理者へのメール送信 11 mailTransport.sendMail(adminMail, (err, info) => { 12 if (err) { 13 return console.error(`admin send failed. ${err}`) 14 } 15 return console.log('admin and send success.') 16 }) 17})
こちらを確認しましたが、onCall ではそもそも Access-Control-Allow-Origin を
記述する必要がないため、なぜ
No 'Access-Control-Allow-Origin' header is present on the requested resource.
こちらが表示されるかわかりませんでした。
また、Cloud Functions for Firebase でCORSを許可する方法
こちらを参考に functions/index.jsに以下ソースコードを追記しました。
functions
1// yarn add cors をしたのち、cors 定数を定義 2const cors = require('cors')({origin: true}) 3//関数をcorsでラップ 4cors(mailTransport.sendMail(adminMail, (err, info) => { 5 if (err) { 6 return console.error(`admin send failed. ${err}`) 7 } 8 return console.log('admin and send success.') 9 }))
しかし、解決には至りませんでした。
補足情報(FW/ツールのバージョンなど)
functions
1{ 2 "name": "functions", 3 "description": "Cloud Functions for Firebase", 4 "scripts": { 5 "lint": "eslint .", 6 "serve": "firebase serve --only functions", 7 "shell": "firebase functions:shell", 8 "start": "npm run shell", 9 "deploy": "firebase deploy --only functions", 10 "logs": "firebase functions:log" 11 }, 12 "engines": { 13 "node": "10" 14 }, 15 "dependencies": { 16 "firebase-admin": "^8.6.0", 17 "firebase-functions": "^3.3.0", 18 "nodemailer": "^6.4.2", 19 "yarn": "^1.21.1" 20 }, 21 "devDependencies": { 22 "eslint": "^5.12.0", 23 "eslint-plugin-promise": "^4.0.1", 24 "firebase-functions-test": "^0.1.6" 25 }, 26 "private": true 27} 28
あなたの回答
tips
プレビュー