javascriptファイルが動かない

##vscodeでもbracketでもエクスプローラーから開いてもローカルホスト上のサイトでJavaScriptで記述したコードが読み込まれません

####エラーはこのようになっています。__Access to internal resource at 'file:///C:/Users/User/Documents/javascript_seito/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.
__
###原因を確かめるために参考にしたコードをそのまま実行してもJavaScriptが実行されませんでした。　　console.log('hello')のみでも実行されなかったのでコード以外の原因があるようです。　　　　先週金曜日から解決法を見いだせていませんので力- リスト---をお貸しください。
リンク内容

<!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">
  <!-- Place favicon.ico in the root directory -->

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

  <meta name="theme-color" content="#fafafa">
</head>

<body>

  <div class="container">

    <div id="js-question" class="mt-3 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="index.js"></script>

</body>

</html>

javascript
1
2let unko = 'Hello World!';
3
4
5const bigUnko = 'He..Hell...Hello World!';
6
7
8const inoki = ['いーち','にーい','さーん','ダーー！！'];
9
10
11let index = 0;
12while(index < inoki.length){ //=4
13  // 繰り返したい命令
14  console.log(inoki[index]);
15  index++; //index = 5
16}
17
18//if / else
19if(inoki.length > 5){
20  console.log('ボンバイエ！');
21} else {
22  console.log('ボンバ...！');
23}
24
25//関数
26const test = (arg) => {
27  //ここに実行したい命令を書く
28  if(inoki.length > arg){
29    console.log('ボンバイエ！');
30  } else {
31    console.log('ボンバ...！');
32  }
33};
34
35//オブジェクト
36const unko2 = {
37  color: 'pink',
38  size: 'large',
39  purfume: 'mint',
40  goToilet: () => {
41    console.log('Hello world!');
42  }
43};
44
45document.getElementsByTagName('button')[0].addEventListener('click', ()=> {
46  //命令を書く
47  window.alert('Hello World!');
48});

##追記
##Access to internal resource at 'file:///C:/Users/User/Documents/javascript_seito/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.
となっています

Daregada

2020/11/16 14:32

HTMLファイルの内容やJavaScriptファイルの内容を質問文に追加してください。

tendo

2020/11/16 14:54

申し訳ありません。訂正いたしました。

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

回答3件

ベストアンサー

htmlの8行目「 <link rel="manifest" href="site.webmanifest">」
ここで参照していることが原因なので、この行を削除してみてください。

投稿2021/07/04 14:57

zuzuzu_mochi

総合スコア13

tendo

2021/07/24 01:46

ありがとうございます！解決しました！

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

ローカルのHTMLをテストしたい場合はserveが便利です。npmがインストール済みであればnpm i serve -gでインストールできます。

投稿2020/11/17 15:47

itepechi

総合スコア248

tendo

2021/07/24 01:46

ありがとうございます！

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

.webmanifestファイルを file:// というスキームを使って内部参照するとセキュリティの問題でエラーになるということかと思われます。
ファイルを適当なホスティングサーバーにアップロードして呼び出すか、XAMPPなどを利用して localhost などで呼び出すと解決するのではと思います。

投稿2020/11/16 15:37