常連

### 実現したいこと
HTML/JavaScriptで構成されたマルチページの学力テストフォームから、GASに対してPOSTリクエストで回答データを送信し、Googleスプレッドシートに記録したいです。

### 発生している問題・分からないこと
フォームの「送信」ボタンを押すと、JavaScriptからfetchでGASにPOST送信しているのですが、CORSポリシーによってブロックされてしまいます。

### エラーメッセージ
```error
index.html:1 Access to fetch at 'https://script.google.com/macros/s/AKf。。。/exec' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
```

### 該当のソースコード

```Javascript
async function submitToGAS(answers) {
  const form = new FormData();
  for (const key in answers) {
    form.append(key, answers[key]);
  }

  try {
    const response = await fetch('https://script.google.com/macros/s/AKf.../exec', {
      method: 'POST',
      body: form,
    });

    if (response.ok) {
      alert('送信が完了しました。ありがとうございました！');
    } else {
      const text = await response.text();
      console.error('送信失敗:', response.status, text);
    }
  } catch (error) {
    console.error('fetchエラー:', error);
  }
}

```

```GAS
function doPost(e) {
  const sheet = SpreadsheetApp.openById('id').getSheetByName("解答データ");

  const data = [];
  for (let key in e.parameter) {
    data.push(e.parameter[key]);
  }
  sheet.appendRow(data);

  return ContentService.createTextOutput("送信成功")
    .setMimeType(ContentService.MimeType.TEXT)
    .setHeader('Access-Control-Allow-Origin', '*')
    .setHeader('Access-Control-Allow-Methods', 'POST, OPTIONS')
    .setHeader('Access-Control-Allow-Headers', 'Content-Type');
}

```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [ ] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [x] その他

##### 上記の詳細・結果
.setHeader('Access-Control-Allow-Origin', '*') をGAS側で返すようにしている（が効果なし）

fetchのmode: 'no-cors' を試したが、レスポンスが取得できず response.ok が常にfalse

GASのデプロイは「ウェブアプリケーションとして公開」で「全員（匿名ユーザー含む）」にしている

Script URL の末尾が /exec であることも確認済み

### 補足
以下の疑問も解消したいです。
GASとJSの組み合わせでCORSを回避する正しい手順・構成が知りたいです

FormDataでのPOST送信は正しい方法でしょうか？

Access-Control-Allow-Origin ヘッダーは ContentService.createTextOutput() では無効だったりしますか？

もしかして doPost ではなく doGet で試すべきでしょうか？
以上ですよろしくお願いします。

GASにフォームデータをPOST送信したいが、CORSエラーでブロックされる

現在フロントのHTMLからAPIを叩いてメールを送信しようとしています。
しかし、送信ボタンを押すと下記のようなエラーがコンソールに出力されます
`Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:63342' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.`

このエラーをググったところ今いるURLから他のURLにリクエストを送ることができないようになっていると書かれてありました
そのためこれを回避するために下記のようのコードを書いたのですが、どうもエラーが解消されません。
どのように書いたらAPIを叩けるのか教えていただきたいです。

```JS
const button = document.getElementById("button");
button.addEventListener("click", function(e) {

    e.preventDefault();

    const name = document.getElementById('name').value;
    const subName = document.getElementById('subName').value;
    const companyName = document.getElementById('companyName').value;
    const pref_name = document.getElementById('pref_name').value;
    const location = document.getElementById('location').value;
    const companyLocation = document.getElementById('companyLocation').value;
    const tellNumber = document.getElementById('tellNumber').value;
    const mailAddress = document.getElementById('mailAddress').value;
    const question = document.getElementById('question').value;

    function sendmail(subject, body) {
        return fetch('MY-API', {
            method: 'POST',
            mode: 'cors',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ subject, body })
        }).then(onLoadFunc);
    }
    sendmail(name,subName,companyName,pref_name,location,companyLocation,tellNumber,mailAddress,question);
});
```

CORSでJSからAPIを叩けない

現在、HTML・JS・FastAPIを使用してWebアプリを作成しているのですが、
EdgeでCORS(クロスオリジン）の突破ができません。

Chromeでは下記サイトを参考に、設定を変更することで無効化は出来ましたが、
Edgeでのやり方が分かりませんでした。
[CORS(クロスオリジン)エラーを無視するためのブラウザ設定](https://webbibouroku.com/Blog/Article/cors-browser-setting)

上記サイトのやり方だと、Edgeではプロパティからリンク先の編集ができません。

---
また、下記サイトを参考にコマンドラインからの起動も試してみましたが、
Windowsのため？openコマンドが使えませんでした。
[開発時にCORSを無視するGoogleChromeの起動オプション](https://qiita.com/mottox2/items/498bb31d67caa2d8a71f)

---

また、以下のようにコマンドを打ち、ショートカットからEdgeが起動できても、
検索バーに 「--disable-web-security」と表示されるだけで、
実際にCORSが無効になった様子はありませんでした。

```
start microsoft-edge: --disable-web-security
```
```
start "Microsoft_Edge.lnk" --disable-web-security
```

---

お時間ある方で、**Edgeで開発用にCORSを無効** にするやり方をご存じの方いらっしゃいましたらご助力頂けますと幸いです。


---

### 追記

In Privateブラウザを試しにコマンドで下記のように開いてみたら開けた。
起動の仕方はあってるのか・・・？
でも --disable-web-security を同じように指定すると検索されてしまう。

```
start "Microsoft_Edge.lnk" '-private'
⇒　In Private ブラウザを開くことに成功
```

```
start "Microsoft_Edge.lnk" '-disable-web-security'
⇒ 検索窓に -disable-web-securityと入るだけ
```

```
start "Microsoft_Edge.lnk" '--disable-web-security'
⇒ 検索窓に --disable-web-securityと入るだけ
```

---

### 回答を受けての追記

ProgramFilesのどこを探しても Edgeのexeファイルが見つからず、ショートカットから起動しようとしています。

startコマンドではなく違うコマンドを使うべきなのでしょうか・・・？


```cmd
start "Microsoft_Edge.lnk" --disable-web-security --user-data-dir="C:\Users\hoge\AppData\Local\Google\Chrome\User Data"

Error:⇒ Start-Process : 引数 '--user-data-dir=C:\Users\hoge\AppData\Local\Google\Chrome\User Data' を受け入れる位置指定パラメーターが見つかりません。
```

```cmd
 start microsoft-edge: --disable-web-security --user-data-dir="C:\Users\hoge\AppData\Local\Google\Chrome\User Data"

Error:⇒ Start-Process : 引数 '--user-data-dir=C:\Users\hoge\AppData\Local\Google\Chrome\User Data' を受け入れる位置指定パラメーターが見つかりません。

```

```cmd
 "Microsoft_Edge.lnk" --disable-web-security --user-data-dir="C:\Users\hoge\AppData\Local\Google\Chrome\User Data"

Error:⇒式またはステートメントのトークン 'disable-web-security' を使用できません。
```

```cmd
 microsoft-edge: --disable-web-security --user-data-dir="C:\Users\hoge\AppData\Local\Google\Chrome\User Data"

Error:⇒用語 'microsoft-edge:' は、コマンドレット、関数、スクリプト ファイル、または操作可能なプログラムの名前として認識されません。
```

開発用にEdgeでCORSを無視できるようにしたい

Vue.js初心者です。

axiosを使用して通信するところでエラーが出てしまいます。
```ここに言語を入力
Access to XMLHttpRequest at 'http://test.com/' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.
```

調べると結構出てきたので、試してみましたが上手くいきませんでした。
自分の理解が低く、理解できないところもありました。
https://qiita.com/Ryoma0413/items/c41d10d2e6e2a420c3cf
https://qiita.com/att55/items/2154a8aad8bf1409db2b#simple-request-%E3%81%A8-preflight-request-%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6
https://b1tblog.com/2019/11/03/vue-axios/
https://developer.mozilla.org/ja/docs/Web/HTTP/CORS
https://teratail.com/questions/140784

```vue
<script>
import axios from 'axios';

export default {
  data() {
    return {
      term: '',

    }
  },
  methods: {
    async exe() {
      this.$emit('loadStart')
      const headers = {'Access-Control-Allow-Origin': '*'}
      const { data } = await axios.get('//test.com/', {headers});
      this.$emit('loadComplete', { results: data.results})
    }
  }
}
</script>
```

試した事
```ここに言語を入力
import axios from 'axios';
axios.defaults.headers.get['Access-Control-Allow-Origin'] = '*'
```
vue.config.jsを作成して
https://qiita.com/Ryoma0413/items/c41d10d2e6e2a420c3cf
```ここに言語を入力
module.exports = {
  devServer: {
    proxy: {
      "/api/": {
        target: "http://localhost:8080",
      }
    }
  }
};

vueのファイル
/api/を追加
const headers = {'Access-Control-Allow-Origin': '*'}
const { data } = await axios.get('/api/test.com/', {headers});

↓
404 (Not Found)
設定がうまう行ってないのか
```
dataに設定してthis.で呼び出し
https://teratail.com/questions/140784
```ここに言語を入力
export default {
  data() {
    return {
      term: '',
      headers: {
        'Content-Type': 'application/json;charset=UTF-8',
        'Access-Control-Allow-Origin': '*',
      }
    }
  },
  methods: {
    async exe() {
      this.$emit('loadStart')
      const { data } = await axios.get('//test.com/', {headers: this.headers});
      this.$emit('loadComplete', { results: data.results})
    }
  }
}

↓

Access to XMLHttpRequest at test.com from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.
```

```ここに言語を入力
web上のrequest headers
Access-Control-Allow-Origin: *の設定はされていました。
```

自分の力では解決する事ができませんでした。
どなたか知恵を貸していただきたいです。

よろしくお願いします。

vue/cli 4.3.1

Vue.jsでaxiosを使った通信でCORS policyで止められる

laravelで作成したapiをjsのXMLHttpRequestを使って叩こうとしています。
サーバー側とクライアント側は違うサーバーで運用しており、共にbasin認証がかけてあります。

### サーバー側
 laravelを使って作成しています。 Corsの許可をおこなっているmiddlewareは以下です。
```php
// middleware/Cors.php
    public function handle($request, Closure $next)
    {
        return $next($request)
            ->header('Access-Control-Allow-Origin','*')
            ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
            ->header('Access-Control-Allow-Headers', 'Origin, Content-Type, Accept, Authorization, X-Requested-With')
            ->header('Access-Control-Allow-Credentials', 'true');
    }
```

### クライアント側
 jsのXMLHttpRequestを使って叩いています。
```js
  var request = new XMLHttpRequest();
  // URLを開く
  request.open('GET', url , [true,clientId,clientSecret]);
  request.responseType = 'json';

  // レスポンスが返ってきた時の処理を記述 
  request.onload = function () {
    // レスポンスが返ってきた時の処理
    //省略
  }
  // リクエストをURLに送信
  request.send();
```

### エラー内容
```error
index.php:1864 GET http://サーバーurl 401 (Unauthorized)
 (anonymous) @ index.php:1864
 mightThrow @ jquery-3.4.1.js:3557
 process @ jquery-3.4.1.js:3625
 setTimeout (async)
 (anonymous) @ jquery-3.4.1.js:3663
 fire @ jquery-3.4.1.js:3291
 fireWith @ jquery-3.4.1.js:3421
 fire @ jquery-3.4.1.js:3429
 fire @ jquery-3.4.1.js:3291
 fireWith @ jquery-3.4.1.js:3421
 ready @ jquery-3.4.1.js:3901
 completed @ jquery-3.4.1.js:3911
index.php:1 Access to XMLHttpRequest at 'http://サーバーurl' from origin 'サーバーurl' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
```

### やってみたこと

 - setRequestHeaderを使ってbasin認証の情報を付与する。
```js
var authorizationBasic = window.btoa(clientId + ':' + clientSecret);

request.open('GET', 'url', true);
request.responseType = 'json';
request.setRequestHeader('Authorization', 'Basic ' + authorizationBasic);
```

 - Postmanから叩いた場合はデータが取れます。この事からサーバー側の問題ではないのではないかと考えています。

 - 開発時にlocalhostで実装した際には動いており、サーバーに乗せたときに動かなくなった為、basic認証周りではないのかと考えていますが、いくつかのXMLHttpRequestにbasic認証情報を与える試しましたが反応がなく困っております。

問題の本質が見切れていない状態ですが困ってしまいました。何か気になる方でも構いません。回答よろしくお願い致します。

## 解決方法
withCredentialsプロパティをtrueに設定する。
この際にサーバー側の'Access-Control-Allow-Origin'の設定がワイルドカード(*)になっているとエラーが発生するので、クライアント側のドメイン指定のみにしてあげる必要がありました。

```js
// URLを開く
  request.open('GET', url, [true, clientId, clientSecret]);
  request.responseType = 'json';
  request.withCredentials = true;
```

XMLHttpRequestでBasic認証の付いているサーバーに対しapiを叩く

JavaScriptで、開いたウィンドウのオブジェクトを取得したいのですが、"cross-origin frame"エラーが出てしまいます。

'http://localhost:3000/english/image'には、http header 'Access-Control-Allow-Origin', '*' を指定していますが、意味がなかったみたいです。(CORSの一括りだと思ったのですが違うのでしょうか…。)

サーバーサイドでcross-origin frameを許可するにはどうしたら良いでしょうか？

```
var myWindow = window.open('http://localhost:3000/english/image','_blank','height=400,width=400,top=40,left=80',false);

undefined
myWindow.document
VM325650:1 Uncaught DOMException: Blocked a frame with origin "https://www.google.co.jp" from accessing a cross-origin frame.
    at <anonymous>:1:10
```

cross-origin frameを許可するには

### vueでaxiosを使用し、郵便番号検索APIをたたくとCORSのエラーが出る

```vue
<script>
data() {
 return {
  headers: {
    'Content-Type': 'application/json;charset=UTF-8',
    'Access-Control-Allow-Origin': '*',
   }
 }
},
methods: {
 axios.get('https://zipcloud.ibsnet.co.jp/api/search?zipcode=7830060', this.headers)
 .then(response => {
    console.log('status', response.status);
    console.log('body', response.data);
  })
 .catch(err => {
    console.log('err', err);
  })
}
</script>
```
色々調べていたのですが、上記のやり方で解決されている方が多く、真似してみたのですが、


`Access to XMLHttpRequest at 'https://zipcloud.ibsnet.co.jp/api/search?zipcode=7830060' from origin 'http://localhost:8080' 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.`

というエラーが出てしまいます。
おかしいところ、他にも設定しなくてはいけないところがあったら教えていただけますと幸いです。

Vue.js  axios でCORSエラーを解決したい

### 実現したいこと
HTMLで入力したデータ(inputやradio)をGASに送信してスプレッドシートに書き込みたいです。

### 発生している問題・分からないこと
JavascriptからGASに送信するときに以下のエラーコードが発生します

### エラーメッセージ
```error
Access to fetch at 'https://script.google.com/macros/s/AKf.../exec' from origin 'http://xxx' 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.
```

### 該当のソースコード

```Javascript
document.addEventListener('DOMContentLoaded', function () {
  function collectAnswers() {
    const answers = {};

    document.querySelectorAll('#page-1 input[type="text"]').forEach((input, i) => {
      answers[`yomi${i + 1}`] = input.value.trim();
    });

    answers['jp_01'] = document.querySelector('input[name="jp"]')?.value.trim() || '';
    answers['jp_02'] = document.querySelector('input[name="jp1"]:checked')?.value || '';
    answers['choice'] = document.querySelector('input[name="choice1"]:checked')?.value || '';
    answers['jp5'] = document.querySelector('input[name="jp5"]')?.value.trim() || '';
    answers['contact'] = document.querySelector('input[name="contact1"]:checked')?.value || '';
    answers['math_01'] = document.querySelector('input[name="math_01"]:checked')?.value || '';
    answers['math_02'] = document.querySelector('input[name="math_021"]:checked')?.value || '';
    answers['math_03'] = document.querySelector('input[name="math_031"]:checked')?.value || '';
    answers['math_041'] = document.querySelector('input[name="math_041"]')?.value.trim() || '';
    answers['math_042'] = document.querySelector('input[name="math_042"]')?.value.trim() || '';
    answers['math_043'] = document.querySelector('input[name="math_043"]')?.value.trim() || '';

    return answers;
  }

  async function submitToGAS(answers) {
    const form = new FormData();
    for (const key in answers) {
      form.append(key, answers[key]);
    }

    try {
      const response = await fetch('https://script.google.com/macros/s/AKf.../exec', {
        method: 'POST',
        body: form,
        mode:"cors",
        headers: {
            'Content-Type': 'application/json'
        }
      });

      if (response.ok) {
        alert('送信が完了しました。ありがとうございました！');
      } else {
        const text = await response.text();
        console.error('送信失敗:', response.status, text);
        alert('送信に失敗しました。もう一度お試しください。');
      }
    } catch (error) {
      console.error('fetchエラー:', error);
      alert('送信に失敗しました。もう一度お試しください。');
    }
  }

  const hoverButton = document.querySelector('#page-4 .button[data-role="submit-button"]');
  if (hoverButton) {
    hoverButton.addEventListener('click', () => {
      const answers = collectAnswers();
      submitToGAS(answers);
    });
  } else {
    console.warn("送信ボタンが見つかりませんでした。");
  }
});

```

```GAS
function doPost(e) {
  const sheet = SpreadsheetApp.openById('ID').getSheetByName("スプレッドシートの名前");

  sheet.appendRow([
    new Date(),
    e.parameter.yomi1,
    e.parameter.yomi2,
    e.parameter.jp_01,
    e.parameter.jp_02,
    e.parameter.choice,
    e.parameter.jp5,
    e.parameter.contact,
    e.parameter.math_01,
    e.parameter.math_02,
    e.parameter.math_03,
    e.parameter.math_041,
    e.parameter.math_042,
    e.parameter.math_043
  ]);

  return ContentService.createTextOutput("送信成功")
    .setMimeType(ContentService.MimeType.TEXT)
    .setHeader("Access-Control-Allow-Origin", "*");
}

```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [ ] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [x] その他

##### 上記の詳細・結果
 'Content-Type': 'application/json'を色々変えてみましたが、エラーの内容は変わらず、GASもコードを変更するごとに再デプロイしてアクセスできるユーザーを全員に常にしています。

### 補足
自分はまだ実践も未経験かつほぼ独学で進めているので、コードが分かりずらかったりすると思います。申し訳ございません。
また、ここに質問する前に調べたりchatGPTに質問していますが、解決されず...といった状態です。初心者ですが、どうかよろしくお願いします。