aircolor memolog

Web制作・テクノロジー、たまに旅行記

React + Express + ベーシック認証で、manifest.jsonに401エラーが出たので対処したメモ

Create React appsでReactアプリを作成、yarn buildコマンドでbuildしたアプリに、expressとbasic-authを使い、ベーシック認証をかける仕組みを作ろうと思ったら、

GET http://localhost:3000/manifest.json 401 (Unauthorized)

というエラーが出た。faviconや他の静的ファイルはBasic認証を通しているので、何故?と思って調べたら、manifestファイルはCORSの設定をしないと、ベーシック認証が突破できない模様。
public/index.htmlのmanifest.jsonを読み込んでいる箇所を、以下のように書き換えることで回避ができた。crossoriginという属性が有るのは知っていたけど、こういうところで使うのかぁ、という共有。Reactって書いたけどcrossorigin にしか言及してなくってすんません。

<link rel="manifest" href="%PUBLIC_URL%/manifest.json" crossorigin="use-credentials"/>

参考

github.com

developer.mozilla.org