크롬 CORS 에러 발견하고 해결했던 일요일 아침
늘 문제는 발생하는 법이고 어쨌든 해결하면 될 뿐
최근 아기가 태어났다. 아직 생후 26일 된 나의 사랑스러운 아기는 내 알람만큼이나 정확한 시간에 일어나 밥을 내놓으라고 성화다. DNA에 스케쥴러나 Crontab이 설치되어 있나 하는 생각이 들었다.
오늘 일요일 아침 역시 마찬가지다 5시 반부터 예열을 시작하더니 정확히 6시에 울어재낀다. 모유를 먹이고 겨우 잠잠해졌을 때 거실로 나와 컴퓨터를 켰다. 늘 아침이면 내 사이트 점검을 한다. 혹시나 멈춘 것은 없는지 오류는 안 나고 있는지 확인을 한다.
티스워드 사이트를 점검하던 중 키워드 검색과 실시간 검색어가 작동이 안 되는 것을 발견했다. 크롤링이 잘못되었나 싶어 모바일로 체크를 해봤다. 모바일에서는 정상 작동이다. 개발자 도구를 열어 console에서 어떤 오류를 뿜어내는지 확인해 봤다. 다음과 같은 메시지가 나왔다.
Access to fetch at 'https://tisword.com/realtime/xxxxxxxxxxx.php' from origin 'https://www.tisword.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
php 파일에서 오류가 생기고 있었는데 CORS policy에 대한 문제였다. 처음 보는 것이었다. 어제까지는 아무 문제 없다가 왜 오늘부터 이런 오류가 생기는지 알 수 없었다. 뒤 내용을 보면 'Access-Control-Allow-Origin'이 없다는 것이다. 뭔지 모르겠다. 마음은 급해지고 이를 검색해보는 내 손가락은 다급했다.
구글링을 했다. 역시 구글엔 없는 게 없다. 이 모든 것들을 기록하는 사람들을 나는 너무나 존경한다. 약 30분간의 검색 끝에 크롬 CORS 에러가 무엇이며 'Access-Control-Allow-Origin'이 왜 없으며 어떻게 해야 하는지에 대해 배웠다.
티스워드는 php로 만들어졌는데 request header에 'Access-Control-Allow-Origin'을 넣어주면 되는 문제였다. php 파일 시작 부위에,
header("Access-Control-Allow-Origin: *");
이것을 추가해 주었다. 그리고 다시 정상 작동되었다.
이걸 해결하기 위해서는 http에 대한 지식이 필요했다. 나는 http나 network에 대한 지식이 없지만 수많은 사람들이 나와 같은 문제를 어떻게 해결해야 하는지 이미 웹문서로 남겨두었으니 그걸 참고만 하면 되었다.
다시 한번 느끼는 것이지만, 나는 이 문제가 정확히 어떤 것이고 왜 저렇게 해결해야 하는지 알지 못한다. 문제가 발생했고 그걸 해결했던 것뿐이다. 코딩은 모든 것을 이론적으로 완벽히 알아야 할 수 있는 게 아니라 일단 진행하다가 문제가 발생하면 그 문제를 해결해 나가는 어드벤처물 같은 것이다.
일단 몰라도 만들고자 하는 것을 만들어 나가는 것. 그러다 일요일 아침 세수도 하기 전에 컴퓨터 앞에서 전전긍긍할지라도 어쨌든 해결해나가는 것이 중요하지 않을까 생각해 본다.
[참고했던 블로그]
