크롬 브라우저에서만 axios 403 에러가 납니다.

Question

안녕하세요, 초보개발자입니다.Django <-> Vue.js 간 axios 통신을 구현하고 있습니다.크롬에서 처음에는 잘 동작하다가 어느순간 403 에러가 떳습니다.처음에는 csrf token이나 CORS 문제로 접근해서 header 추가하고 별짓을 다 해봤는데 실패했습니다.그런데 Postman, edge는 잘 동작해서 도저히 뭐가 문제인지 모르겠습니다.이런 경험 있으신 분 있나요?django views.py 구현 :class UploadView(APIView): def get(self, request, *args, **kwargs): return Response(request.data) def post(self, request, *args, **kwargs): print(&#34;POST 진입&#34;) form &#61; UploadFileForm(request.POST, request.FILES) if form.is_valid(): title &#61; form.cleaned_data[&#34;title&#34;] uploaded_file &#61; form.cleaned_data[&#34;file&#34;] # 현재 날짜를 가져와서 폴더 이름 생성 current_date &#61; datetime.datetime.now().strftime(&#34;%Y-%m-%d&#34;) upload_path &#61; os.path.join(settings.MEDIA_ROOT, current_date) # 생성된 폴더가 없다면 폴더 생성 os.makedirs(upload_path, exist_ok&#61;True) # 업로드된 파일을 저장 file_path &#61; os.path.join(upload_path, uploaded_file.name) with open(file_path, &#34;wb&#34;) as file_destination: for chunk in uploaded_file.chunks(): file_destination.write(chunk) print(&#34;파일저장완료&#34;) return Response(&#34;파일 업로드 및 저장 성공&#34;)vue.js axios 통신 구현 :import axios from &#34;axios&#34;; async uploadFile() { const formData &#61; new FormData(); console.log(this.selectedFile); formData.append(&#34;title&#34;, this.selectedFile.name); formData.append(&#34;file&#34;, this.selectedFile); try { const response &#61; await axios.post(&#34;/api/upload/&#34;, formData, { headers: { &#34;Content-Type&#34;: &#34;multipart/form-data&#34;, }, }); alert(response.data); } catch (error) { alert(error); console.log(error); } },

codezzzz · Answer

https://dpcalfola.tistory.com/entry/Django-pojc-E5-CSRF-token%EC%97%90-%EB%8C%80%ED%95%98%EC%97%AC-%ED%86%A0%ED%81%B0-%EA%B2%80%EC%A6%9D-%EB%AC%B8%EC%A0%9C-%ED%95%B4%EA%B2%B0-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EB%A7%88%EA%B0%90-%EC%B6%94%EA%B0%80%EA%B8%80-2%EB%B2%884. 공식 문서의 안내를 따른 문제 해결

크롬 브라우저에서만 axios 403 에러가 납니다.

1개의 답변

기술 목록