常連

現在フロントの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で止められる

### 実現したいこと
Next.jで自作アプリを作っています。（Next.jsは初心者です。）
PropsやStateの仕組みを少し理解できたと思うところでリストを作ろうとしていますがうまくいきません。サーバーサイド言語とフロントを別々にして作っていて、fetch関数でサーバーからのデータを取得していますが、fetch関数実行時に「TypeError: Failed to fetch」のエラーがでて失敗します。

作ろうとしているリストは、一番下に"さらに表示"ボタンのようなボタンがあり、それを押すごとにN個ずつ外部から続きのリストデよータを取得してきて、後ろに追加していき縦に長くなっていくようなものです。

実装的な構想としては、コンポーネントが呼ばれたらリストのデータをfetchしてきて、それをuseState()で監視させ、リストの更新時には再度fetchしてきて既存のリストデータと合体させるような形で更新していくような作りを想定しています。（この作成方針で絶対実現したいとかではなく、自分の技術レベルの範囲内で実現方法を考えた結果たどり着いた方法です。）

**9/21 8:00追記**
ブラウザのコンソールを見ると、画像のようなエラーが出ていて、これを調べたらCORSエラーというエラーが原因となっているようでした。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-09-21/91c5972e-351a-48cb-a8eb-0845c25c103e.png)
解消方法を調べてみたところ、通信時のhttpヘッダにアクセスを許可するような修正が必要との様子だったので[こちら](https://zenn.dev/ako/articles/e91075b08da785)を参考にfetch関数を後述の通り修正を加えました。
ですが変わらず、コンソール上でエラー出ています。
解消方法をご存じの方いたらよろしくお願いしまします。



### 発生している問題・分からないこと

前置きが長くなりましたが、問題となっているのは、後述するソース内でfetch関数が裏で失敗しているところです。エラー画面上に「TypeError: Failed to fetch」と大きく表示されています。（それ以前に呼ばれたコンポーネント内の要素は描画されている）

解決方法をご存じの方がいたらよろしくお願いします。



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

```
"use client";
import { useEffect, useState } from 'react';
import { fetchUser } from '@/lib/getter';

const getUserList = async () => {
    const userList = await fetchUser();        //３fetchUser()内でfetch関数が呼ばれリストのデータが返される（ここで失敗する。）
    return userList;
};

export default  function MakeList() {        //１コンポーネントが呼ばれる
    const [userList, setUser]  = useState([{}]);

    useEffect(() => {
        const fetchedUser = getUserList();        //２useEffectが実行されgetUserList()が呼ばれる
        setUser(fetchedUser)        //４取得したリストデータをsetUser()で監視する。（エラーのためここは実行されない）
      }, []);

    return ( 
        <>
            {userList?.map((obj) => (
                <React.Fragment key={obj.lisId}>
                    <div key={obj.lisId}>
                        <div>
                            {obj.user}
                        </div>
                    </div>
                </React.Fragment>
            ))}    
        </>
    );
}


```

```
////以下のような構造でリストデータを作り、userListで監視させようとしています。

    listData: [
      {
        user: "田中",
        listId: "1",

      },
      {
        user: "佐藤",
        listId: "2",

      }
      //更新するごとに続きが追加されていくような
    ]

```

9/21 8:00追記 
修正したfetchのソース
```
  const res = await fetch(`http://localhost:3000/top?XXXXXXX=${XXXXXXXX}`, {
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
      "Access-Control-Allow-Headers": "Content-Type, Authorization",
    },
    method: 'GET',
    cache: 'no-store',
  });
  const result = await res.json();
```

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


##### 上記の詳細・結果
![エラー画面](https://ddjkaamml8q8x.cloudfront.net/questions/2024-09-20/77b6cb9c-7f00-4a8f-b7b4-e1440a3739b0.png)

### 補足
Next.jsバージョン：(14.2.11)

[Next.js] バックエンド側のAPI取得時にCORSエラーでfetch失敗する。

### 実現したいこと
Next.jsを使ってローカルで自作アプリを作っています。
サーバーサイド言語とフロントを別々にして作っていて、fetch関数でサーバーからのデータを取得していますが、fetch関数実行時に「TypeError: Failed to fetch」のエラーがでて失敗します。

ブラウザのコンソールを見ると、口述する画像のようなエラーが出ていて、これを調べたらCORSエラーというエラーが原因となっているようでした。さらに調べると異なるオリジン間でのWebリソース共有を制御するしくみが働いているために発生している事象とのことでした。

これを回避するために、[こちら](https://qiita.com/flu_bit/items/80b34526ffe25169c76a)を参考にまずはバックエンド側でCORS設定を施そうと検討しています。

ですが変わらず、コンソール上でエラー出ています。
解消方法をご存じの方いたらよろしくお願いしまします。

### 発生している問題・分からないこと
↓ブラウザのコンソールエラー
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-09-21/eab3931e-4cb6-4d4b-9779-60caa59eb015.png)

※http://localhost:3000/top がバックエンドサーバーのURL（フロント側のfecth関数内のurlの箇所に記載しているurl）
※http://localhost:3001 はフロント側のURL（ブラウザにURL入力するURL）



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

```
Rustのルーティング設定

use std::env;
use axum::response::{IntoResponse, Redirect};
use http::{header::HeaderValue};
use dotenv::dotenv;
use crate::career_contents::{edit_career, show_career, create_career};
use crate::auth::{sign_up, login};
use tower_http::cors::CorsLayer;

pub async  fn running_router()  {
  let origins = [
    "http://localhost:3001".parse::<HeaderValue>().unwrap(),      //フロント側（http://localhost:3001）からのアクセスを許可するよう設定
];

    let app = axum::Router::new()
    
    .route("/top", axum::routing::get(show_career::show_top))
    .layer(          //layerを新しく追加した。
      CorsLayer::new()
          .allow_origin(origins)
  );
```

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

##### 上記の詳細・結果
先述した通り変わらず、コンソール上でエラーが出ています。


### 補足
Next.jsバージョン：(14.2.11)

[Rust] axumでCORSエラーの回避設定がうまくいかない

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を叩く

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

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
```