Swagger-UI で TypeError: Failed to fetch が出て死ぬ

apiの開発を行うため、swagger-uiを利用していたが、ローカル上のapiに通信を行っても、TypeError: Failed to fetch となり結果が表示できなかった。

原因

CORSの設定が必要な構成になっていたこと。

構成

api → localhost:80
swagger-ui → localhost:8001

修正内容

同じドメイン、ポート上で動くようにした(しろと公式に書いてあった)。
https://swagger.io/docs/open-source-tools/swagger-ui/usage/cors/

構成

nginx → localhost:80
nginxから振り分けでapi or swagger-ui

---

調査してわかったこと

別コンテナで動かしている際、下記で解決したと思っていたが、これではgetしか動かなかった。

Access-Control-Allow-Origin を設定する

自分の場合は phpでslimを利用しているため

/** @var Psr\Http\Message\ResponseInterface $response */
$response->withHeader('Access-Control-Allow-Origin', '*');

とすることで解決した。（*は後で変えようとは思う。）