Django添加login_required后出现CORS missing allow origin错误如何解决

你遇到的CORS报错本质是login_required装饰器返回的302重定向响应未被django-cors-headers中间件处理，导致响应缺失CORS相关头信息。Django原生装饰器的响应优先级高于中间件，默认的登录重定向响应不会加载你配置的CORS规则，且你未配置跨域携带凭证，导致服务端无法识别前端的登录状态，始终返回无CORS头的重定向响应。

• 第一步：替换login_required装饰器为DRF原生权限类
  DRF的权限类属于框架内部响应流程，会正常经过CORS中间件处理，自动携带CORS响应头。修改视图代码如下：

  from rest_framework.permissions import IsAuthenticated
  
  class essai2(APIView):
      serializer_class = ComSerializer
      permission_classes = [IsAuthenticated] # 新增权限控制，替代login_required
      def get(self, request):
          Pictos = Pictograms.objects.all()
          data = ComSerializer(Pictos, many=True).data
          if data:
              return Response(data, status=status.HTTP_200_OK)
  

• 第二步：调整中间件顺序
  确保settings.py中的CorsMiddleware排在所有中间件的首位，才能正常给所有响应加CORS头：

  MIDDLEWARE = [
      'corsheaders.middleware.CorsMiddleware', # 必须放在第一行
      'django.middleware.common.CommonMiddleware',
      'django.contrib.sessions.middleware.SessionMiddleware',
      'django.contrib.auth.middleware.AuthenticationMiddleware',
      # 其余原有中间件保持顺序不变
  ]
  

• 第三步：补充跨域凭证配置
  你使用Django session登录，需要允许跨域携带Cookie才能识别登录状态：

  1. settings.py新增配置：

  CORS_ALLOW_CREDENTIALS = True
  # 冗余配置可删除，新版django-cors-headers保留CORS_ALLOWED_ORIGINS即可
  CORS_ALLOWED_ORIGINS = [
       'http://localhost:3000',
  ]
  

  2. 修改前端axios请求配置，开启携带凭证：

  useEffect(() => {
      axios.get("http://127.0.0.1:8002/com/test", {
          withCredentials: true // 开启后会自动携带session cookie
      }).then(function (response) {
          console.log("coucou");
          setpictos(response.data);
      })
  }, []);
  

• 可选方案：如果必须使用login_required装饰器，要使用类视图适配的装饰方式：

  from django.utils.decorators import method_decorator
  from django.contrib.auth.decorators import login_required
  
  @method_decorator(login_required, name='dispatch')
  class essai2(APIView):
      # 原有视图代码
  

内容的提问来源于stack exchange，提问作者guillaume