vue+drf(django rest framework)のcors問題

はじめに

frontendをvue、backendをdrfでweb appを初めて開発中です。
vueを127.0.0.1:8080(localhost:8080)、drfを127.0.0.1:8000で実行しておきます。
8080から8000に向けてapiリクエスト出してもcorsエラーがでて、getやpostが飛びませんでした。

webpack devserverを見よう見まねで書いてみましたが、理解するには時間がかかりそうだったため断念しました。
front,backともにcors設定を書くことで解決しました。

環境

windows10
vue/cli 5.0.4
npm 8.8.0
vue 2.6.14
Django 3.2.12
drf 3.13.1
django-cors-headers 3.13.0

設定(frontend)

非同期通信にaxiosを使用しています。
vueのmain.jsに以下のデフォルト設定を書くことでcors設定を追加できます。

main.js

　axios.defaults.baseURL = 'http://x.x.x.x:nnnn'
　axios.defaults.headers.common['Accept'] = 'application/json'
　axios.defaults.headers.common['Content-Type'] = 'application/json;charset=utf-8'
　axios.defaults.headers.common['Access-Control-Allow-Origin'] = 'http://y.y.y.y:mmmm'
　axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'

参考URLに詳しい設定内容が載っています。

また、main.jsで設定する以外にもaxios.createでインスタンス化した場合にcors設定を引数として追加できます。

api.js

import axios from "axios";

const api = axios.create({
  baseURL: "http://localhost:8000/api",
  timeout: 5000,
  headers: {
    "Content-Type": "application/json",
    "X-Requested-With": "XMLHttpRequest",
  },
});

api.interceptors.request.use(
  (config) => {
    store.dispatch("message/clearMessages");
    const token = localStorage.getItem("access");
    if (token) {
      console.log("aiueo");
      config.headers.Authorization = "JWT " + token;
      return config;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

設定(backend)

django-cors-headersをインストールしてsetting.pyにcors設定を追加してください。

setting.py

INSTALLED_APPS = [
    'corsheaders',
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware', 
    'django.middleware.common.CommonMiddleware',

]

CORS_ALLOW_ALL_ORIGINS=False
CORS_ALLOWED_ORIGINS=[
    "http://localhost:8080",
    "http://127.0.0.1:8080",
]

CORS_ALLOW_HEADERS = (
'accept',
'accept-encoding',
'authorization',
'content-type',
'dnt',
'origin',
'user-agent',
'x-csrftoken',
'x-requested-with',
'access-control-allow-origin',
)

CORS_ALLOWED_ORIGINSは django-cors-headersのバージョンによってCORS_ORIGIN_WHITELISTと書く場合もあるので
注意してください。

参考にさせて頂いたサイト

https://handatec.hatenablog.com/entry/2020/04/21/162535
https://pypi.org/project/django-cors-headers/