Vue.jsとDjango REST Frameworkで画面が真っ白になる原因〜1〜

画面が真っ白になる原因

Vue.jsとDjangoの組み合わせで開発中にnpm run serveで起動した開発サーバーでページを確認した際に、画面が真っ白になって何も表示されなくなる原因の内の1つであるCORSの設定について解説します。この時、デベロッパーツールでソースコードを確認すると該当のコンポーネントの部分以外は表示されている状態でした。

STATICFILES_DIRSの設定

STATICFILES_DIRS = [BASE_DIR / 'dist/static'] 

ホワイトリストを指定

django-cors-headersをインストールしてsettings.pyにCORS_ORIGIN_WHITELISTを追加します。

pip install django-cors-headers

CORS_ORIGIN_WHITELIST = (
    'http://127.0.0.1:8080',
    'http://127.0.0.1:8000',
    'http://localhost:8000',
    'http://localhost:8080',
)

settings.pyに以下の項目を指定することで無事に画面が表示されました。

STATICFILES_DIRS（staticファイルが入っているディレクトリ）
CORS_ORIGIN_WHITELIST（許可するURL）

---

株式会社ファントムへのお問い合わせ

群馬県でPythonを使ったAIやソフトウェアを開発している株式会社ファントムが運営しています。