JS+GASで問い合わせフォーム
解決したいこと
昔に似たような質問をしましたが、まだ原因が分からないので再度
JSとGASで問い合わせフォームを作っています。
GitHubPages(もしくはHTMLだけのレンタルサーバー)で公開するのはPHPなどのサーバーサイド言語は使用できません
CORS?というのでエラーが出たので解決方法を教えていただけませんか?
発生している問題・エラー
クロスオリジン要求をブロックしました: 同一生成元ポリシーにより、
https://script.google.com/macros/s/xxxxx/exec?q=aaaa
にあるリモートリソースの読み込みは拒否されます
(理由: CORS ヘッダー ‘Access-Control-Allow-Origin’ が足りない)。ステータスコード: 302
クロスオリジン要求をブロックしました: 同一生成元ポリシーにより、https://script.google.com/macros/s/xxxx/exec?q=aaaa
にあるリモートリソースの読み込みは拒否されます
(理由: CORS 要求が成功しなかった)。ステータスコード: (null)
Error: TypeError: NetworkError when attempting to fetch resource. index.html:102:17
submitMessage http://127.0.0.1:3000/index.html:102
(非同期: promise callback)
submitMessage http://127.0.0.1:3000/index.html:101
onclick http://127.0.0.1:3000/index.html:1
該当するソースコード
index.html
<section class="section">
<div class="container">
<textarea name="" class="textarea message" id="" placeholder="Hello world" rows="10"></textarea>
<div class="field is-grouped">
<div class="control">
<button class="button is-link" onclick="submitMessage()">Submit</button>
</div>
<div class="control">
<button class="button is-link is-light">Cancel</button>
</div>
</div>
</div>
</section>
<script>
function submitMessage() {
const message = document.querySelector('.message').value;
const encodedMessage = encodeURIComponent(message);
fetch('https://script.google.com/macros/s/xxxxx/exec?q=' + encodedMessage, {
method: 'GET',
mode: 'cors' // CORSモードを指定
})
.then(response => response.text())
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Error:', error);
});
}
</script>
コード.gs
function doGet(e) {
const spreadSheetByActive = SpreadsheetApp.getActive();
const sheet = spreadSheetByActive.getActiveSheet();
sheet.appendRow([e.parameter.q])
let output = ContentService.createTextOutput();
output.setMimeType(ContentService.MimeType.JSON);
output.setContent(e.parameter.q);
return ContentService.createTextOutput(output);
}
自分で試したこと
ChatGPTに教えてもらってもちゃんと動くコードはできませんでした。
自分の力ではそれで精一杯です。
0
