JavaScriptのエラーが出まくっていて対処の仕方がわかりません

プログラミング初心者でエラーの対処がわかりません。
youtubeを見ながら模写をしていて同じコードを書いているのにエラーが出ました。

丸投げする形で申し訳ないのですが、以下のエラーの対処の仕方を教えてください。

<!doctype html> <html class="no-js" lang=""> <head> <meta charset="utf-8"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="manifest" href="site.webmanifest"> <link rel="apple-touch-icon" href="icon.png">  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.3/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> <meta name="theme-color" content="#fafafa"> </head> <body> <div class="container"> <div id="js-question" class="alert alert-primary" role="alert"> A simple primary alert—check it out! </div> <div class="d-flex justify-content-center"> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="ml-1 btn btn-primary">Primary</button> <button type="button" class="ml-1 btn btn-primary">Primary</button> <button type="button" class="ml-1 btn btn-primary">Primary</button> </div> </div> <script src="app.js"></script> </body> </html>

・Refused to apply style from index html:1'https://stackpath.bootstrapcdn.com/bootstrap/4.5.3/css/bootstrap.min.css' because its MIME type ('application/xml') is not a supported stylesheet MIME type, and strict MIME checking is enabled

・Uncaught SyntaxError: Invalid or unexpected app.js:1 token

・Access to manifest at 'file:///Users//Documents/%E3%82%AF%E3%82%A4%E3%82%BA/site.webmanifest' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

・Failed to load resource: net::ERR_FAILED

・Access to internal resource at 'file:///Users//Documents/%E3%82%AF%E3%82%A4%E3%82%BA/site.webmanifest' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

・Failed to load resource: the server responded with a status of 403 ()

m.ts10806

2020/10/14 12:26

コードやエラーはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564

think49

2020/10/18 01:11

> コードやエラーはマークダウンのcode機能を利用してご提示ください。回答が来た瞬間、指摘を無視する質問者が多いですね

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

回答1件

ひとまず
https://stackpath.bootstrapcdn.com/bootstrap/4.5.3/css/bootstrap.min.css はエラーメッセージにもある通り、xmlです。直接URL実行してみると分かります。

4.5.2は大丈夫のようです。

html
1<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

他のエラーについてもおそらく4.5.3のAccessDeniedに引っ張られたものでしょう。
公式サイトでも確かにCDNは4.5.3になっていますが、
何かのミスか、不具合か・・・ちょっと探しただけでは調べがつきませんでした。
4.5.4などにかえても同じ表示になるので、おそらく存在しないバージョンなのだと解釈しました。

追記

kei344さんより4.5.3が使えるURLいただきました。
https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css

※いずれにしても、直接ブラウザからアクセスして正しく内容が得られるものかどうかは確認してくださいね。

投稿2020/10/14 13:05

編集2020/10/17 21:42

m.ts10806

総合スコア80842

KomeeI

2020/10/17 12:01

ありがとうございます。色々見直したらエラーが減りました。引き続きやってみます。

kei344

2020/10/17 12:06

To: m.ts10806さん公式サイトとURLが違いますよ。（公式はCDNを提示しています） https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css

m.ts10806

2020/10/17 21:41

kei344さん情報ご提示ありがとうございます。公式で提示されているのが使えないのは何か事情があるんでしょうかね（まだ調べてませんが） KomeeIさん kei344さんが提示されたURLに変更してみてください。4.5.3が使えます。

m.ts10806

2020/10/17 23:41

とりあえず、現時点の公式のCDNでは動いてます。  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

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