ニコニコのコンテンツ検索APIガイトの cors 対応

読む際の注意

  • 外部のAPI を fetch で取得して、利用するソフト作成した経験はありません
  • chrome 拡張機能で何かを作成したことはありません。

結論

cors 対応してない。Web アプリで利用する方法は見つからなかった。
chrome 拡張機能の manifest.json の permissons を使用すれば、API を利用できる。

対象の API

niconico コンテンツ検索API(https://api.search.nicovideo.jp/api/v2/:service/contents/search )

cors 対応の調査方法

  1. webpack dev server を install
  2. サーバーをアクセスしたら、 API に fetch するプログラムを作成
  3. 実行したら、Control-Allow-Origin header がないと言われた。
    Access to fetch at ‘https://api.search.nicovideo.jp/api/v2/video/contents/search?q=a&targets=title&_sort=-viewCounter’ from origin ‘***’ has been blocked by CORS policy: 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.
  4. Control-Allow-Origin header はサーバー(niconico)側で設定しないといけなく、クライアント(利用)側で設定できない。
  5. JSONS で対応できるという記事もあったが、情報を不正に取得でき、覚えても今後役に立たないと思って却下にした。

解決方法に辿り着くまで

  1. Github で上の API をキーにして検索
  2. chrome 拡張機能で利用しているプロジェクトを発見し、 clone する。
  3. API のアクセス部分を丸々コピペしたが、上と同じようにエラーが表示された。
  4. 違いを一つ一つ消していき、chrome 拡張機能の manifest.json の permissions が関係していることが判明
  5. manifest.json を作成して、 permissions に https://api.search.nicovideo.jp/api/v2/video/contents/search を追加して、 chrome 拡張機能として動かしたら、無事 API の結果を取得できた。

解決理由

permissions に URL を記入すると、host パーミッションとして機能する。オリジンに対して、クロスーオリジン制約なしに fetch アクセスができる権限をもらえ、エラーは発生しなくなる。
値(URL)はマッチパターンとして、指定することが可能で、動画以外も取得したい場合は、 video -> * にすればOK。

参考記事