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

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

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

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

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Q&A

0回答

1297閲覧

Firebase functionsのCORSエラーを解決したい。

toshihirokato

総合スコア20

Vue.js

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

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

0グッド

2クリップ

投稿2020/02/03 09:20

編集2020/02/04 10:28

前提・実現したいこと

現在、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

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

アカウントをお持ちの方は

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問