[TIL] 프론트에서 POST시 cors-headers 응답오류.. 해결완료

처음으로 프론트엔드와 백엔드 기능을 나누어 작성하며 매우 힘든 시간을 보내는 중이다..

팀원분들도 그렇고 나도 cors error에 맞닥뜨렸다.

 

 

 

 

또다시 Cors header 문제로 막혔다..ㅠㅠ

 

에러메세지가 상당히 친절한 편이고, 구글링해보면 사례도 많이 나온다. (대부분 영어지만..)

 

요청 url 과 응답 url 필드가 달라서 생기는 문제.

 

 

 

 

Console 창에서 network > 빨갛게 표시된 오류를 클릭하면 오류 상태를 자세히 확인할 수 있다

 

 

Preflight 는 200 이 떴다는건 서버와의 교류는 ok

cors에러는 브라우저에서 발생한다고 한다.

 

 

브라우저에서의 허용된 값이 아닌 요청을 막아주기 위함

= 보안정책이다.

 

 

 

 

 

시도 1

 

 

1.MIDDLEWARE에 CorsMiddleware를 최상단에 기입해준다.

 

**꼭 CommonMiddleware 보다 상단에 위치해야함

# Root / settings.py
MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
	'django.middleware.common.CommonMiddleware',
	...]

 

 

2. CORS_ORIGIN_WHITELIST에 연동할 ip와 포트를 적어준다.
ip와 localhost 포트를 안전하게 두 개 다 적는다.

 

# Root / settings.py
CORS_ALLOW_ALL_ORIGINS = True

# cors 허용 리스트 추가
CORS_ORIGIN_WHITELIST = ['http://127.0.0.1:8000',
                        'http://localhost:8000',
                        'http://127.0.0.1:5501',
                        'http://localhost:5501',
                        ]

CORS_ALLOW_CREDENTIALS = True

 

 

 

넣어봤지만 오류가 계속 된다...

 

 

 

 

 

 

시도 2

 

확장프로그램 설치로 크롬 자체의 corsheaders 기능을 허용하도록 설정한다

 

 

설치 페이지 :

https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf/related

Allow CORS: Access-Control-Allow-Origin

 

Docs 페이지 :

https://mybrowseraddon.com/access-control-allow-origin.html?v=0.1.8&type=install

Allow CORS: Access-Control-Allow-origin

 

 

슬프게도 해결되지 않았다...

일단 다른 기능을 구현해야하니 feed_create 페이지를 보류하고 다른 기능을 먼저 구현해야겠다.

 

 

 

 

 

 

3번째 방법은 시도해보고 싶었지만 어느부분에 붙여야하는지 모르겠다!

"access-control-allow-origin": "*",

 

 

 

 

*** 여전히 팀프 진행 중 ***

timezone.now = 230515 05:37 ㅋㅋ

cors headers 해결 안됨

배포시 서버쪽에서 설정을 바꾸어주어야하는 문제인듯하다..ㅠㅠ

 

 

 

[참조] :
https://hyeonyeee.tistory.com/65

https://bobbyhadz.com/blog/cors-error-request-header-field-authorization-is-not-allowd-by-access-control-allow-headers

 

 

아래 블로그는 엄청 자세히 적혀있으니 corsheaders를 뿌셔보고 싶다면 추천

https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-CORS-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95-%F0%9F%91%8F

🌐 악명 높은 CORS 개념 & 해결법 - 정리 끝판왕 👏

 

---

 

 

0515 추가 작성. 튜터님과 함께한 오류 해결

 

 

1. 단골오류 오타

#feed_create.js / fetch하여 POST하는 부분
'Authorization': 'Bearer ' + localStorage.getItem("access"),
'content-type' : 'application/json', #context 로 오타가 있었음

 

 

 

2. 단골오류 오류가 있는 코드

const request_post = await fetch(`${backend_base_url}/create_feed/`, {
    headers:{
        headers:{  #headers 안에 headers; 1개만 써야함
        ...

 

 

 

 

3. 단골오류... 잘못된 추가 코드 

 

 

참고한 서류들에서 아래의 코드를 서버에 붙인다고 하였는데, 어디에 추가해야할지 고민이 되었다.

headers에 감싸져있는 것을 보고 일단 js에 붙여뒀었다^^;

 

const request_post = await fetch(`${backend_base_url}/create_feed/`, {
    headers:{
        "access-control-allow-origin": "*",
        'Access-Control-Allow-Headers': 'Content-Type, Authorization',
        'Access-Control-Allow-Methods': '*',
	...

 

하지만 이것은 여기 들어가는 것이 아니다!

 

 

정확한 위치는 서버에 넣어주어야한다.. 서버란 백엔드, 장고에서는 곧 settings.py 를 말함.

생각해보니 소문자로 되어있어서 그렇지 이전에 대문자로 작성했던 것 같다..

#서버! settings.py에서 들어감

"access-control-allow-origin": "*",  #개발단계에서는 이렇게 사용하고, 배포할때 도메인으로 넣어준다
'Access-Control-Allow-Headers': 'Content-Type, Authorization',
'Access-Control-Allow-Methods': '*',

      

 

 

 

결론  :

•  확장프로그램 사용은 비추천
• ACCESS-CONTROL-ALLOW ... = *  도 웬만하면 개발단계에서만 사용하도록 한다.
  
  
  
  
• 1번째 방법이 올바른 해결법!
  좋은건 다시 한 번..!

# Root / settings.py
CORS_ALLOW_ALL_ORIGINS = True

# cors 허용 리스트 추가
CORS_ORIGIN_WHITELIST = ['http://127.0.0.1:8000',
                        'http://localhost:8000',
                        'http://127.0.0.1:5501',
                        'http://localhost:5501',
                        ]

CORS_ALLOW_CREDENTIALS = True