CORS 에러, 무엇일까?
소공 과제를 하던 중 CORS에러때문에 엄청 고전했다.
내가 이해한 CORS와 해결 방식을 작성하려고 한다.
🌐 악명 높은 CORS 개념 & 해결법 - 정리 끝판왕 👏
악명 높은 CORS 에러 메세지 웹 개발을 하다보면 반드시 마주치는 멍멍 같은 에러가 바로 CORS 이다. 웹 개발의 신입 신고식이라고 할 정도로, CORS는 누구나 한 번 정도는 겪게 된다고 해도 과언이
inpa.tistory.com
이 게시글로 공부를 하였다.
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코드를 지웠는데도 통신이 잘 되는 것을 보았다. 왜 그런지는 아직 잘 모르겠다.