교차 오리진 요청 차단됨:동일한 오리진 정책은 http://127.0.0.1:8000/api/task-list/의 원격 리소스를 읽을 수 없습니다.

교차 오리진 요청 차단됨:동일한 오리진 정책은 http://127.0.0.1:8000/api/task-list/의 원격 리소스를 읽을 수 없습니다.

저는 vuejs와 djangorest 단일 페이지 애플리케이션을 작업하고 있습니다.문제가 너무 명확하여 Cross-Origin 요청이 차단되었습니다. 동일한 오리진 정책에서는 원격 리소스 오류를 읽을 수 없습니다.

내 vuex 코드는 다음과 같습니다.

mutations:{
        addTask: function(){
            axios({
                url: 'http://127.0.0.1:8000/api/task-list/',
                method: 'POST',
                headers: {
                    'X-CSRFToken': getCookie('csrftoken')
                }
            }).then(response => {
                console.log(response.data);
            }).catch(err => {
                console.log(err.response);
            })
        }
    },

그리고 나의 django 애플리케이션 URL에 있는 나의 django rest urls.py :

urlpatterns = [
    path('task-list/', TaskList.as_view()),
    path('task-create/', TaskCreate.as_view())
]

주요 앱 URL:

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include('task.urls')),
    path('api/', include('authentication.urls')),
    path('home/', returnHome)
]

나의 views.py 코드:

class TaskList(APIView):
    def get(self, request):
        tasks = Task.objects.all()
        serialized = TaskSerializer(tasks, many=True)
        return Response(serialized.data, status=200)

내 vue 앱이 http://localhost:8080에서 실행되고 있어서 django cors 헤더를 설치하여 아래 코드와 같이 구성했습니다.

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',


    # rest api
    'rest_framework',
    'rest_framework.authtoken',
    'corsheaders',

    # my apps
    'authentication',
    'task'
]
MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'corsheaders.middleware.CorsMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
CORS_ALLOWED_ORIGINS = [
   'http://localhost:8080',
   'https://localhost:8080'
]

하지만, 난 아직도 이해하고 있어요.Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:8000/api/task-list/. (Reason: CORS request did not succeed)오류!

해보기도 했습니다.CORS_ALLOW_ALL_ORIGINS = True하지만 여전히 변화는 없습니다

제가 여기서 잘못하고 있는 게 있나요?저는 이것에 대해 많은 것을 검색했지만, 솔루션은 어디에서나 코르셰이더에 대한 올바른 구성을 작성하려고 했습니다.

당신의 문제는 특히 상대적으로 장고 미들웨어의 배치입니다.CommonMiddleware그것은 그것보다 더 높게 나열되어야 합니다.

부터django-cors-headers 읽기:

코르스 미들웨어는 특히 장고의 공통 미들웨어 또는 화이트노이즈의 화이트노이즈 미들웨어와 같은 응답을 생성할 수 있는 미들웨어보다 가능한 한 높게 배치해야 합니다.이전 버전이 아니면 이러한 응답에 CORS 헤더를 추가할 수 없습니다.또한 CORSE_REPLACE_HTTPS_REFERER를 사용하는 경우에는 Django의 CsrfView 미들웨어 앞에 배치해야 합니다(아래 자세한 내용 참조).

언급URL : https://stackoverflow.com/questions/67447878/cross-origin-request-blocked-the-same-origin-policy-disallows-reading-the-remot