常連

### 実現したいこと
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エラーを解決したい

お世話になっております。

window.openで開いた先の一覧画面でクリックすると、その内容を親画面に返す処理を実装します。
親画面に渡す際にwindow.openerを使用しています。
ここで、親画面と子画面ではサイトのURLが以下例のように異なります。

親画面：https://client1.test.com/
子画面：https://common.test.com/


Internet Explorerではこの処理で正常に親画面に値が返されます。
Chromeの場合、エラーになってしまいます。
いわゆるCORS(Cross-Origin Requests)が原因だと考えており、ヘッダーに下記を埋め込んでみたのですが正常動作しません。
ブラウザ側の設定は変更していません。(ユーザーがいるものなので変更できないです)
ChromeのCORS対策を超えるための設定をご教示いただけないでしょうか。

---

親画面のJavaScript：

```JavaScript
// 子画面を開く
var ShowSearch = function () {
	window.open("https://common.test.com/", "_blank");
};
// 子画面から値を受け取る
var OnSelectedItem = function (value) {
	alert(value["test"]);
};
```

子画面のJavaScript：
```JavaScript
<script>
var OnSelect = function () {
	if (window.opener && window.opener.OnSelectedItem) {
		var result = {};
		result["test"] = "test";
		// 子画面に値を渡す
		window.opener.OnSelectedItem(result);
	}
};
</script>
<button type="button" onclick="OnSelect();">選択</button>
```

エラーメッセージ：
Uncaught DOMException: Blocked a frame with origin "https://common.test.com/" from accessing a cross-origin frame.
(window.opener.OnSelectedItemで発生します)


親画面、子画面両方のサーバーサイドでHttpのレスポンスヘッダーに以下を追加しています。
```
Access-Control-Allow-Origin:*
Access-Control-Allow-Headers:*
Access-Control-Allow-Methods:GET,POST,HEAD,OPTIONS
Cross-Origin-Opener-Policy:Allow
Cross-Origin-Window-Policy:Allow
X-Frame-Options: sameorigin
```