[Flutter] Flutter Web & Django 통신 시 cors 문제 해결

dio 패키지를 사용하면 web request 코드를 쉽게 작성할 수 있지만 Flutter 웹에선 FormData에 변수를 넣어 요청을 보내도 Django에서 request.POST와 request.FILES에서 빈 파라미터를 읽을 뿐이었다..

IOS/Android 시뮬레이터에서 같은 데이터를 dio로 요청하면 잘 작동하지만 Flutter Web은 dio의 빈 파라미터를 보냄과 동시에 cors 문제까지 터졌다..

열심히 Stack 선생님께 물어봤는데 Flutter Web은 아직 한창 개발 중이라 선생님도 잘 모르는 것 같았다..

몇가지 솔루션이 있긴 했는데 Flutter Web의 보안 정책을 꺼버리거나 하는 방법이라 사용하기는 싫었다..

결국 Django쪽에서 미들웨어를 사용해 allow-origin 설정을 통해 문제를 해결하였다..

한 이틀간 고생하며 찾은 방법인데 이게 정답인지는 모르겠다..

Stack 선생님 링크 : https://stackoverflow.com/questions/35760943/how-can-i-enable-cors-on-django-rest-framework/38162454#38162454

1. 미들웨어 설치

pip install django-cors-headers

2. settings.py cors 설정 추가

INSTALLED_APPS = [
	...
    'corsheaders',
    ...
]

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

CORS_ALLOW_ALL_ORIGINS = True
CORS_ALLOW_CREDENTIALS = True

CORS_ALLOW_ALL_ORIGINS = True <= 이부분이 'Access-Control-Allow-Origin': '*' 을 설정하는 부분이다..

특정 주소만 사용하고 싶다면,

CORS_ALLOWED_ORIGINS = [
    'http://localhost:3030',
]
CORS_ALLOWED_ORIGIN_REGEXES = [
    'http://localhost:3030',
]

이런식으로 하면 된다.