WebAPIを叩いた時に下記のCORSに関するエラーが出る

#概要
WebAPIを叩いた時に下記のCORSに関するエラーが出ます。

Access to XMLHttpRequest at 'http://api.randomuser.me/api/'
from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: 
Response to preflight request doesn't pass access control check:
Redirect is not allowed for a preflight request.

#解決したいこと
外部APIからJSONデータを取得したい。
#ソースコード

javascript
1$(document).ready(function () {
2	console.log("aaa");
3  $.ajax({
4    url: 'http://api.randomuser.me/',
5    dataType: 'json',
6    headers: {'Access-Control-Allow-Origin': '*'},
7    success: function(data){
8      console.log(data);
9      },
10  });
11});

#確認したこと･試したこと
･jQuery自体は正常に動いています(上記cosole.log(“aaa”)が出力された)。
･『CORSの問題はAJAXの仕様によるものなのでRailsを経由すると普通に取れる』という意見を別のところで頂いたので試しましたが同様のエラーが出ました(なぜRailsを経由すると取れるのか原理はよくわかりませんでした。。)。
･http://api.randomuser.me/ へ直接飛ぶとほしいJSONデータが見れました。
･fetchを使って、別のAPIを呼ぶと上手く呼べました。url部分をrandomuserに変えるとjQuery同様のエラーが出ます(jQueryを使ったのは公式のhow toにあったから)。

javascript
1//これは上手くAPIを呼べました。
2fetch('https://holidays-jp.github.io/api/v1/date.json')
3  .then(response => response.text())
4  .then(text => {
5    console.log(text);
6  });

･fetchの場合オプションでmode: corsを追記することと、レスポンスヘッダーを追記するべきという記事を見かけたので追記してみましたが同様の結果でした。

javascript
1fetch('http://api.randomuser.me/',{
2//↓追記
3  mode: 'cors',
4  headers: new Headers({'Access-Control-Allow-Origin': '*'}),
5})
6//↑追記
7  .then(response => response.JSON())
8  .then(JSON => {
9    console.log(text);
10  });

//fetchで書いて出たエラー
Access to fetch at 'http://api.randomuser.me/' from origin 
'http://127.0.0.1:5500' 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/att55/items/2154a8aad8bf1409db2b
#自分なりの予測
preflight request = OPTIONリクエストが｢本来ほしい情報をリクエストする前にリクエストする事前確認｣のリクエストということは分かりました。

そして解決策として、エラー中の｢Redirect is not allowed for a preflight request.｣部分に対して、リクエストを単純リクエストに変更するのが良いのかと思いました。(https://developer.mozilla.org/ja/docs/Web/HTTP/CORS#Preflighted_requests)
ただ、現状methodはGET(デフォルト)=単純リクエストになっていると思うので、解決の糸口がつかめずにいます。オプションにmethod: ‘GET’を記述しても変わりませんでした。
#実行環境
ローカル環境で立ち上げています。
ファイル構造は下記の通りです。
dir
|--index.html
|--index.css
|--index.js
|--jquery.min.js

(その他示した方が良いことあればご指摘ください！)

よろしくお願いします！

行動規範の内容に同意します

回答3件

現状methodはGET(デフォルト)=単純リクエスト

条件を満たしているか確認しましょう

headers: {'Access-Control-Allow-Origin': '*'},

これはレスポンスヘッダーに設定するものです
利用しているapacheやnginx等のWEBサーバーを通しているならそちらで、そうでないならrailsのレスポンスで設定しましょう
※rubyの事は分からないので自分で確認してください

(なぜRailsを経由すると取れるのか原理はよくわかりませんでした。。)。

CORS関係無いからです

投稿2020/12/19 16:23

hentaiman

総合スコア6415

mozamoza_fruit

2020/12/20 00:37

回答ありがとうございます！ >条件を満たしているか確認しましょう｢以下の全ての条件を満たすもの｣が単純リクエストなんですね。なぜか｢以下のいずれか｣と誤読していました。。確認不足でした！ありがとうございます！ >CORS関係無いからですおそらく私の理解が間違っているので、ご指摘頂ければ幸いです。 Rails(webサーバー)からAPIサーバーへリクエストを送るためCORSにはならないという理解で正しいのでしょうか？とすると、htmlとjavascriptのみで構成されていた場合もhtml(webサーバ)からAPIサーバへリクエストを送る構図になるのではないでしょうか? Railsを経由した場合とそうでない場合で、どう構図が変わるのか理解できていません。。ご教授ねがいます。

ockeghem

2020/12/20 00:57

CORSはブラウザのセキュリティ機能であり、サーバーからAPIにアクセスする場合はCORSは関係なくなります。ブラウザ側から見れば、Railsを経由したから関係なくなるのではなく、HTMLと同じオリジン（サーバー）であればCORSは関係なくなるというのが理由です

mozamoza_fruit

2020/12/20 02:09

ockeghem様コメントありがとうございます！ご説明頂き腑に落ちました！つまりRailsを経由しない場合は ★ブラウザ→(htmlが保存されている)webサーバ→ブラウザ　　　　　→APIサーバ→ブラウザとなることでクロスオリジンとなるが、Railsを経由した場合は ★ブラウザ→(htmlが保存されている)webサーバ→APIサーバ→webサーバ→ブラウザという順番で通信が行われる為、ブラウザはクロスオリジンと認識しない、という理解でいます！ありがとうございます！

行動規範の内容に同意します

ベストアンサー

エンドポイントが違う気がします。
http://api.randomuser.me/
ではなくて
https://randomuser.me/api/

ではないでしょうか。
下記で正しくデータを得ることはできました。

HTML
1(略）
2        $(document).ready(function () {
3            console.log("aaa");
4            $.ajax({
5                url: 'https://randomuser.me/api',
6                dataType: 'json',
7                success: function (data) {
8                    console.log(data);
9                },
10            });
11        });
12(略）