CORS 에러, 무엇일까?

소공 과제를 하던 중 CORS에러때문에 엄청 고전했다.

내가 이해한 CORS와 해결 방식을 작성하려고 한다.

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 개념 & 해결법 - 정리 끝판왕 👏

이 게시글로 공부를 하였다.

 

CORS란?

위 블로그에서는

CORS는 함축 단어로써 이를 풀면 Cross-Origin Resource Sharing 이라는 단어로 이루어 져 있다. 이 문장을 직역하면 "교차 출처 리소스 공유 정책"이라고 해석할 수 있는데, 여기서 교차 출처라고 하는 것은 (엇갈린) 다른 출처를 의미하는 것으로 보면 된다.

출처: https://inpa.tistory.com/entry/WEB-📚-CORS-💯-정리-해결-방법-👏 [Inpa Dev 👨‍💻:티스토리]

라고 설명하였다.

간단하게, 다른 위치에서 특정 api를 호출하려고 할 때 이를 보안상 막는 정책이라고 이해하였다.

 

나같은 경우는, 클라이언트에서 서버의 api를 호출하려고 해서 이 에러가 출력되었다.

네트워크를 보니 호출한 api가 에러를 리턴한 것을 볼 수 있다.

CORS error라고 출력된 것을 볼 수 있다.

이는 호출된 api쪽 서버에서 누구누구의 접근을 허용한다라고 명시를 해놓아야 한다. 

cors_headers = {
    "origins": "http://localhost:3000",
}
CORS(app, resources={r"/voice-recognization": cors_headers})

flask app.py 파일에 위와 같은 코드를 추가하였다. 그랬더니 CORS 에러가 더이상 뜨지 않았다.

(사실 api 이름을 챗지피티가 알려준대로 */api/*라고 작성해서 3시간동안 고생했다.)

 

위 코드는 voice-recognization api를 localhost 3000포트에서의 접근을 허락한다는 의미이다. origin은 근원이라고 생각하면 될 것 같다.

네트워크에서 호출한 api를 보면, 다음처럼 3000포트가 허용된 것을 볼 수 있다.

 

 

추가로 안 사실인데, 방금 cors코드를 지웠는데도 통신이 잘 되는 것을 보았다. 왜 그런지는 아직 잘 모르겠다.