質問者は、GitHub Pagesで公開したWebページから画像をアップロードし、Google Apps Script (GAS) で画像を処理して、Gmailに送信しようとしていますが、CORSエラーが発生していると報告しています。この問題は、ブラウザのセキュリティ設定による制限で、外部のサーバーへのアクセスがブロックされることが原因です。この記事では、CORSエラーの原因と解決策を説明します。
1. CORSエラーとは?
CORS（Cross-Origin Resource Sharing）は、異なるオリジン（ドメイン）間でリソースを共有する際に発生するセキュリティ制限です。このエラーは、ブラウザが異なるドメイン間でリソースをリクエストする際に、サーバーが適切な許可を返さない場合に発生します。今回の問題は、GitHub PagesからGoogle Apps Script（GAS）にリクエストを送信した際にCORSエラーが発生しているものです。
2. エラーメッセージの詳細
質問者が遭遇しているエラーメッセージは以下の通りです：
「Access to fetch at ‘https://script.google.com/macros/s/***********/exec’ from origin ‘https://*********.github.io’ 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.」
このエラーメッセージは、GitHub Pages（Webページ）からGASのAPIエンドポイントにアクセスする際に、GAS側がCORSを許可していないことを示しています。
3. 解決策: Google Apps ScriptにCORSヘッダーを追加
GASのコード内でCORSエラーを解決するためには、サーバーがリクエストを許可するために適切なHTTPヘッダーを返す必要があります。以下のコードをGASに追加することで、CORSを許可するヘッダーを設定できます。
function doOptions(e) {
const response = ContentService.createTextOutput('');
const headers = {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'POST, GET, OPTIONS',
'Access-Control-Allow-Headers': 'Content-Type'
};
for (let key in headers) {
response.appendHeader(key, headers[key]);
}
return response;
}このコードは、GASがリクエストを受け取ったときに、CORSヘッダーを適切に設定し、リクエストを許可します。これにより、GitHub Pagesからのリクエストが通るようになります。
4. GASでのメール送信処理の確認
GAS内で画像やその他のデータを処理し、Gmailに送信する場合、Base64形式で画像データを取得して、メール本文に埋め込むことができます。以下のコード例では、画像データを取得し、メールに添付して送信する方法を示しています。
function doPost(e) {
try {
const data = JSON.parse(e.postData.contents);
const animals = data.detectedAnimals || [];
const imageData = data.imageData || '';
const emailTo = '********@gmail.com';
const subject = '動物検出通知';
let body = '以下の動物が検出されました:\n' + animals.join(', ') + '\n\n';
if (imageData) {
body += '画像データ（Base64）が送信されました。\n';
}
MailApp.sendEmail(emailTo, subject, body);
const output = ContentService.createTextOutput('通知送信成功');
output.setMimeType(ContentService.MimeType.TEXT);
return output;
} catch (err) {
const output = ContentService.createTextOutput('エラー: ' + err.message);
output.setMimeType(ContentService.MimeType.TEXT);
return output;
}
}このコードは、動物を検出した後に、画像データ（Base64形式）が送信されているかを確認し、それに基づいてGmailに通知を送る仕組みです。
5. まとめ
CORSエラーは、異なるドメイン間でリソースをリクエストする際に発生しますが、Google Apps Scriptのコードに適切なCORSヘッダーを追加することで解決できます。また、GASで画像データをメール送信する際には、Base64形式での送信が有効です。これらの対策を講じることで、GitHub Pagesからのデータ送信をスムーズに行い、エラーを回避できます。
コメント