chrome · JavaScript
오류 문구
Access to fetch at 'https://api.example.com/data' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
무슨 뜻인가
요청은 서버에 닿았고 응답도 왔지만, 그 응답에 이 출처를 허락하는 머리글이 없어 브라우저가 자바스크립트에게 넘기기를 거부했다는 뜻입니다. 브라우저만 이 규칙을 지키므로 같은 주소를 curl로 치면 잘 됩니다 — 그래서 서버가 멀쩡한데 브라우저에서만 막히는 것으로 보입니다. 고칠 곳은 언제나 서버이고, 응답에 Access-Control-Allow-Origin: http://localhost:3000을 붙이는 것입니다. 프런트엔드에서는 아무것도 할 수 없고, 남의 서버를 고칠 수 없다면 내 서버를 거쳐 부르는 프록시가 유일한 길입니다. Allow-Origin: *는 쿠키를 함께 보내는 요청에서는 통하지 않고, 그 경우에는 출처를 정확히 적고 Allow-Credentials까지 켜야 합니다.
고치는 명령
curl -I -H "Origin: http://localhost:3000" https://api.example.com/data- 내는 도구
- chrome
- JavaScript
- 15
브라우저와 node의 오류는 대개 무엇이 잘못되었는지만 알려 주고 왜 그 값이 그렇게 되었는지는 알려 주지 않아서 — undefined를 읽었다, 함수가 아니었다, JSON이 아니었다 — 고칠 자리는 터진 줄이 아니라 그 값을 만든 위쪽에 있고, ?.와 기본값으로 그 줄만 조용하게 만들면 같은 문제가 더 먼 곳에서 더 알아보기 어려운 꼴로 다시 나타납니다.
오류 문구를 읽는 법
- 첫 줄부터 읽습니다. 아래로 갈수록 도구 내부 이야기이고, 정작 원인은 맨 위에 적혀 있습니다.
- 파일 이름과 줄 번호가 있으면 거기가 시작점입니다 — 스택의 가장 위가 아니라, 내가 쓴 파일이 나오는 가장 위 줄입니다.
- 문구를 그대로 검색합니다. 다만 내 경로와 변수 이름은 지웁니다 — 그 부분이 검색을 방해합니다.
- 같은 문구가 도구 판마다 다르게 나옵니다. 검색 결과가 안 맞으면 판 번호를 함께 넣어 봅니다.
- 고치는 명령을 붙여 넣기 전에 그 명령이 무엇을 버리는지 확인합니다. 되돌릴 수 없는 것이 섞여 있습니다.
자주 묻는 질문
Q. Access to fetch at 'https://api.example.com/data' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 는 무슨 뜻인가요?
요청은 서버에 닿았고 응답도 왔지만, 그 응답에 이 출처를 허락하는 머리글이 없어 브라우저가 자바스크립트에게 넘기기를 거부했다는 뜻입니다. 브라우저만 이 규칙을 지키므로 같은 주소를 curl로 치면 잘 됩니다 — 그래서 서버가 멀쩡한데 브라우저에서만 막히는 것으로 보입니다. 고칠 곳은 언제나 서버이고, 응답에 Access-Control-Allow-Origin: http://localhost:3000을 붙이는 것입니다. 프런트엔드에서는 아무것도 할 수 없고, 남의 서버를 고칠 수 없다면 내 서버를 거쳐 부르는 프록시가 유일한 길입니다. Allow-Origin: *는 쿠키를 함께 보내는 요청에서는 통하지 않고, 그 경우에는 출처를 정확히 적고 Allow-Credentials까지 켜야 합니다.
Q. 어떻게 고치나요?
curl -I -H "Origin: http://localhost:3000" https://api.example.com/data — 실행 전에 위의 설명에서 이 명령이 무엇을 버리는지 확인하세요.
Q. 어느 도구가 내는 오류인가요?
chrome입니다. JavaScript 갈래에 있고, 문구는 23낱말입니다.