前提・実現したいこと

簡易的なシステム作りをしているのですが
送信ボタンを押したら下記のようなエラーが出てしまいました。
送信先のURLは指定のものをコピペしたので間違ってはいないのですが。。。

検索してもなにも引っかからず苦戦してしまっているのでお力添えいただけると助かります。
よろしくお願いいたします。

発生している問題・エラーメッセージ

{"message":"missing key in request header"}

該当のソースコード

<html>

<head>
  <link rel="stylesheet" href="index.css">
</head>


<body>
  <script src="index.js"></script>
  <br><br><br>
  <a href="food.html">好きな食べ物</a>

</body>
</html>

food.html

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="index.css">

    <title></title>
  </head>

  <body>
    <script src="index.js"></script>
  <a href="index.html">戻る</a><br><br><br><br>

    <form action="https://favorite-foods-app.herokuapp.com/foods" id="formId" onsubmit="changeAction()">
        好きな食べ物　<br>
        <input type="text"><br>
        <input type="submit" value="送信">
      </form>
  
  
  </body>
</html>

index.js


function changeAction(){
  let food = "apple";        //変数代入
  
fetch('~~~',{
  method: "POST",
  body: '{"food":"' + food + '"}',
  mode: "cors",
  headers: new Headers({
    'Content-Type': 'application/json',
    'Authorization': 'Bearer ~~~',
  }),
}).then(x=>console.log(x))
}

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

回答3件

ベストアンサー

API仕様に

Authorization Bearer xxxxx

とあるので、ヘッダを追加しなくてはいけないのでは?

js
1fetch('https://favorite-foods-app.herokuapp.com/foods',{
2  method: "POST",
3  body: '{"food":"meat"}',
4  
5  headers: new Headers({
6    'Content-Type': 'application/json',
7    'Authorization': 'Bearer xxxxxx', // 一応隠しておきます
8  }),
9}).then(x=>console.log(x))

というコードを同一ドメインで実行したらレスポンスが返ってきました。
CORSは許可されていないようなので、クライアントからは無理なのではないですか？
（Bearerは普通は公開しないものだと思うんですが、叩いていい奴だったんですよねこれ？）

コメントを受けて追記

js
1fetch('https://favorite-foods-app.herokuapp.com/foods',  // APIエンドポイントのURL
2  {                                                      //   ここからオプション
3    method: "POST",                                      //     メソッドを POST に
4    body: '{"food":"meat"}',                             //     bodyにJSONデータを
5  
6    headers: new Headers({                               //     ここからヘッダ
7      'Content-Type': 'application/json',                //       指定されたヘッダその1
8      'Authorization': 'Bearer xxxxxx',                  //       指定されたヘッダその2
9    }),                                                  //     ここまでヘッダ
10  }                                                      //   ここまでオプション
11)                                                        // ここまで fetch
12.then(x => console.log(x))                               // 戻り値の Promise を then() メソッドで受けとる

投稿2021/10/08 01:28

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！