JavaScriptからチャットワークのAPIを使ってメッセージをポストしたい

前提・実現したいこと

ピュアなJavaScriptからチャットワークのAPIを利用してメッセージ送信を行いたいと考えています。

現在400エラーが返ってきており、通信はできているものの無効なリクエストとして弾かれている状態です。
なお下記に示すのとほぼ同様のコードでGETリクエストし自分の情報を取得は行えています。

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

Responseの中身は以下の通りです。

Response {
  size: 0,
  timeout: 0,
  [Symbol(Body internals)]: {
    body: PassThrough {
      _readableState: [ReadableState],
      _events: [Object: null prototype],
      _eventsCount: 2,
      _maxListeners: undefined,
      _writableState: [WritableState],
      allowHalfOpen: true,
      [Symbol(kCapture)]: false,
      [Symbol(kTransformState)]: [Object]
    },
    disturbed: false,
    error: null
  },
  [Symbol(Response internals)]: {
    url: 'https://api.chatwork.com/v2/rooms/ROOM_NO/messages',
    status: 400,
    statusText: 'Bad Request',
    headers: Headers { [Symbol(map)]: [Object: null prototype] },
    counter: 0
  }
}

該当のソースコード

javascript
1const apiToken = API_TOKEN;
2const roomId = ROOM_NO;
3const url = 'https://api.chatwork.com/v2/rooms/' + roomId + '/messages';
4
5const options = {
6    method: 'post',
7    mode: 'cors',
8    headers: {
9      'X-ChatWorkToken': apiToken,
10      'Content-Type': 'application/x-www-form-urlencoded',
11    },
12    body: "テストメッセージ"
13}
14
15fetch(url, options)
16  .then(res => res)
17  .then(data => {
18    console.log(data);
19  })
20  .catch((error) => {
21    console.log(error);
22  })

試したこと

検索してbody部分を以下のようにするNode.jsのコードがあったので試してみましたが同様の結果でした。

payload: {
  body: "テストメッセージ"
}

実行環境はDockerでWebサーバーを建ててブラウザ上での実行で、先述したようにGETリクエストは行えております。
大変お手数ではございますがご教示頂けると嬉しいです、よろしくお願いいたします。

itagagaki

2021/06/13 04:02

ROOM_NO のところには実際にはIDが入るんですよね？

ciel7

2021/06/13 04:11

おっしゃる通りです！

itagagaki

2021/06/13 06:57

ローカルで試してみると、curlではメッセージ投稿できましたが、Edgeからはfetch実行自体がエラーになりました。 Access to fetch at 'https://api.chatwork.com/v2/rooms/XXX/messages' from origin 'http://XXX' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. mode: 'no-cors' にしてみたら、401が返ってきました。トークンとIDはcurlで成功しているので間違いないはずなのですが... ChromeかEdgeで実行したとき開発者ツールのコンソールにはどんなログが表示されていますか？

ciel7

2021/06/13 10:10

わざわざお試ししてくださり誠にありがとうございます！私の方でも全く同様のエラーが出力されております。

itagagaki

2021/06/13 11:09

ブラウザのクロスドメイン問題ですね。 Windowsでは無理という話がこちらにありました。 https://fm-aid.com/bbs2/viewtopic.php?id=5893 なぜWindowsでは無理なのか理由はわかりませんが… FileMaker Go (iOS)ではできたということでJQueryを使ったコードも載っています。おそらくピュアなJavaScriptでも（fetchでも）できるんだろうと思います。