Django报错：Refused to display 'http://127.0.0.1:8000/' in a frame because it set 'X-Frame-Options' to 'deny'.

报错

Django3.x富文本kindeditor图片上传时图片不能加载显示到编辑器的输入框中，console中报错：Refused to display 'http://127.0.0.1:8000/' in a frame because it set 'X-Frame-Options' to 'deny'.

报错原因

X-Frame-Options 设置出了问题

X-Frame-Options HTTP响应头可用于指示是否允许浏览器在frame、iframe、embed 或者 object中呈现页面。网站可以使用它来避免点击劫持（click-jacking ）攻击，方法是确保其内容不会嵌入到其他网站中。

X-Frame-Options有三个选项值：

1. DENY ：表示该页面不允许在 frame 中展示，即便是在相同域名的页面中嵌套也不允许
2. SAMEORIGIN ：表示该页面可以在相同域名页面的 frame 中展示
3. ALLOW-FROM uri：表示该页面可以在指定来源的 frame 中展示 (该指令已被弃用，不再适用于现代浏览器)

在Django 3.0中，X_FRAME_OPTIONS的默认设置从SAMEORIGIN 变成了DENY。

出现问题的原因在setting中的中间件，Django的项目中默认设置了XFrameOptionsMiddleware的中间件，这个设置将对于X-Frame-Options的配置设置成了DENY：

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    # 'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

解决方法

1. 注释掉上面中间件（不推荐，容易出现中间人攻击）

2. 使用装饰器（推荐，在单独的页面上设置）

   # 引入
   from django.views.decorators.clickjacking import xframe_options_exempt
   from django.views.decorators.clickjacking import xframe_options_deny
   from django.views.decorators.clickjacking import xframe_options_sameorigin
   
   @xframe_options_exempt
   def func1(request):
   
   @xframe_options_deny
   def fun2(request):
   
   @xframe_options_sameorigin
   def fun3(request):
   

3. 在setting中配置（同1，在总体项目设置）

   X_FRAME_OPTIONS = 'SAMEORIGIN'