iframe에 Django웹페이지 보이게 하는 방법(feat. 워드프레스)

안녕하세요.

워드프레스 등 iframe을 사용하는 곳에서 django로 만든 웹페이지를 쉽게 로드하는 방법을 알려드릴려고 해요.

 

여러분도 아시다시피 아래와 같이 Iframe을 사용해서 웹페이지를 보여주는 코드는 아래와 같습니다. 

<p align="middle"> <iframe src="http://X.X.X.X:8888/" width="100%" height="4000"></iframe></p>

 

그럼데, 왜 Django로 만든 웹페이지는 계속 아래와 같이 웹페이지가 보여지지 않고 fail이 뜨는지 알아보았는데..(휴..오래걸렸어요..)

 

첫번쨰는 "크로스도메인"이슈가 있기 때문입니다. 크로스도메인이란 CORS는 Cross Origin Resource Sharing의 약자로

도메인 또는 포트가 다른 서버의 자원을 요청하는 거라는데.. 뭔말인지 저도 모릅니다.. 성격 급한 저는 되게만 하는게 우선이라 아래와 같이 진행해주었습니다. ㅎㅎ 

이 문제를 해결하기 위해서 settings.py에서 아래와 같이 4가지만 진행해주시면 됩니다. 

$ pip install django-cors-headers

ALLOWED_HOSTS = ['*']
CORS_ORIGIN_WHITELIST = ["http://X.X.X.X:8020"]
CORS_ALLOW_CREDENTIALS = True

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

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

1. django-cors-headers 앱을 설치한다.

2. ALLOWED_HOSTS = ['*']를, CORS_ORIGIN_WHITELIST에는 워드프레스의 IP를 작성해줍니다.(내가 웹페이지를 심을 부모의 IP). 마지막으로 CORS_ALLOW_CREDENTIALS = True를 작성해줍니다. 

3. INSTALLED_APPS=[]에서 'corsheaders'를 삽입해줍니다. 

4. MiDDLEWARE=[]에서  'corsheaders.middleware.CorsMiddleware', 'django.middleware.common.CommonMiddleware', 를 삽입해줍니다. 가장 중요한 점은 가장 맨 위에 추가해줘야해요!

 

그럼 워드프레스등과 같은 다른 웹사이트에서 iframe으로 쉽게 Django 웹페에지를 띄울 수 있게 됩니다~!