Q&A
【追記】
以下のようなエラーの対処はどうすればいいのでしょうか？
「CORS ヘッダー ‘Access-Control-Allow-Origin’ が足りない)。ステータスコード: 404」
以下のようなエラーメッセージが表示されます。
「クロスオリジン要求をブロックしました: 同一生成元ポリシーにより、
file:///C:（省略）/json/data.json にあるリモートリソースの読み込みは
拒否されます (理由: CORS 要求が http でない)。」
- FC2のサーバーにアップロードしても表示出来ませんでした。
- ファイルのパスの指定が間違っているのかもしれません。
- 検索して調べましたが、サーバーに関する知識不足なため良く分かりませんでした。
ファイルのディレクトリ構造。
idx.html
[json] --- data.json
[css] --- style.css
[js] --- app.js
--- jquery-3.6.0.min.js
[]はフォルダです。
$(function() { let tbody; tbody = $('#tbody'); // tbody要素。 // data.jsonを取って来る。 $.getJSON('../json/data.json', function(people) { // 配列内の各オブジェクトそれぞれについて処理する。 $.each(people, function(i, person) { // 変数宣言 ************************************************************** let mail, // td要素。 name, // td要素。 no, // td要素。 text_mail, // 各値を取得し、テキストを取得。 text_name, // 各値を取得し、テキストを取得。 text_no, // 各値を取得し、テキストを取得。 tr; // tr要素。 // 変数の初期化 *********************************************************** mail = $('<td>').text(text_mail); name = $('<td>').text(text_name); no = $('<td>').text(text_no); text_mail = person.mail; text_name = person.name; text_no = person.no; tr = $('<tr>'); // 実行処理 ************************************************************** // tr要素にtd要素を追加。 tr.append(no); tr.append(name); tr.append(mail); // tbodyにtr要素を追加。 tbody.append(tr); }); }); });
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>外部ファイルから表作成 - 基本形 | jQuery book demos</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>Ajax table</h1> <table> <thead> <tr> <th>No.</th> <th>Name</th> <th>Mail</th> </tr> </thead> <tbody id="tbody"></tbody> </table> <script src="js/jquery-3.6.0.min.js"></script> <script src="js/app.js"></script> </body> </html>
[ { "no": "0001", "name": "Taro Yamada", "mail": "example1@example.com" }, { "no": "0002", "name": "Hanako Suzuki", "mail": "example2@example.com" }, { "no": "0003", "name": "Takeshi Tanaka", "mail": "example3@example.com" } ]
【追記】
CORS,json,$.getJSONの問題を解決するにはAjaxを
学んで対処すればいいのでしょうか。
お勧めの専門書がございましたら教えて下さい。
HTMLファイルの<head>に <link rel="shortcut icon" href="">を
追加したところ、今度は「Uncaught ReferenceError: $ is not defined」との
エラーが発生しました。
https://portfolio04222020.web.fc2.com/test_03/idx.html
回答1件
0
ベストアンサー
この問題を修正するには、単純に CORS に関するリクエストを発行する際に HTTPS の URL を使用するようにしてください。
Reason: CORS request not HTTP - HTTP | MDN
とのことです。
この文書ですと、HTTPSとなっていますが、HTTPでも大丈夫です。
おそらく、HTMLファイルをダブルクリックで開くなどして fileプロトコルになっているのが原因だと思います。
ローカルにサーバを建てて、localhost などにHTTPプロトコルアクセスするか、あるいは、インターネットに公開されたWebサーバ上にアップロードして試してみてください。
投稿2022/03/31 04:54
総合スコア37444
Lhankor_Mhy様
返信ありがとうございます。
「クロスオリジン要求をブロックしました: 同一生成元ポリシーにより、https://error.fc2.com/web/404.html にあるリモートリソースの読み込みは拒否されます (理由: CORS ヘッダー ‘Access-Control-Allow-Origin’ が足りない)。ステータスコード: 404」とエラー返されました。
それは、FC2に上げた時のメッセージですか？
状況がよくわからないですが、404 となっていそうなので、パスが間違っている感じがします。
というか、ご提示のコードのパスは普通に間違っていませんか。
'../json/data.json' ではなくて、'json/data.json' ですよね？
Lhankor_Mhy様
返信ありがとうございます。
パスを修正して再度アップロードしてみましたが、結局同じエラーメッセージが返って来ました。
なるほど。
そのJSONファイルを直接表示することはできますか？
はい、追記しました。
いえ、そうではなくて、アップロードしたサーバにあるファイルをブラウザでURLを直接打って表示させることができるか、ということをお聞きしています。
あるいは、アップロードしたページを直接見れれば一番話が早いのですが。
これ、JSONは読み込めてますよ。
CORSはファビコンのエラーみたいです。
Lhankor_Mhy様
返信ありがとうございます。
そうなのですか。
私には良く分かりませんが解決方法はありますでしょうか？
解決法というのは、表を表示する、という意味ですか？
はい、そうです。
たぶん、ここがおかしいですね。
mail = $('<td>').text(text_mail);
name = $('<td>').text(text_name);
no = $('<td>').text(text_no);
text_mail = person.mail;
text_name = person.name;
text_no = person.no;
tr = $('<tr>');
変数に代入する前に利用してるように見えます。
Lhankor_Mhy様
何度もアドバイス本当にありがとうございます。
ご指摘の通りコードに問題があり、そこを修正した所無事に表が作成されました。
あなたの回答
tips
プレビュー
