인프런 커뮤니티 질문&답변
작성한 질문수
CORS 질문
작성
·
73
0
CORS 설명 주신 부분을 보면 처음 브라우저에서 request 날릴 때에는 Origin에 아무런 값이 들어가 있지 않아서 response를 받고 그 이후에 받은 html의 javascript 쪽에서 다른 요청을 보냈을 때 기존에 요청하면서 받았던 Origin 값이 같이 들어가면서 이슈가 발생한다고 말씀주셨는데, blog json data 테스트 하는 거 보면 origin이 null인데 바로 cors 에러가 나나요 ?
답변 2
0
안녕하십니까,
바로 CORS 에러가 난다는 의미를 제가 잘 이해하지 못했습니다만,
javascript에서 localhost:8081에 접속하는 코드가 담겨져 있는 html을 그냥 파일 형태로 수행하게 되면(그러니까 localhost:8081에서 다운로드 받지 않고, 그냥 파일 형태로 열게 되면)
해당 html은 서버에서 다운로드 된 파일이 아니므로 Origin이 Null이 되게 됩니다. 근데 html을 수행하는 과정에 javascript를 수행하게 되는데, javascript에서 fetch 명령어로 localhost:8081로 접속을 하려 합니다. 이때 javascript 접속이 CORS 규칙에서 허용하지 않았기 때문에 바로 CORS 오류가 발생합니다.
감사합니다.
최초 origin과 접속 서버 URL 이 헷갈리신것 같습니다.
일반적으로 Browser는 header에 origin 값을 보내지 않습니다. 실습 예제와 같이 html 파일에 javascript가 있고, 해당 javascript가 다른 서버로 접속을 요청하는 경우
browser는 html 파일을 다운로드 받음. 이때 browser의 request header에는 origin값이 아예 없음(여기서 html은 그냥 file에서 다운로드 받지만, 서버에서 받을 때와 유사)
browser는 download 된 html 파일을 실행하려고 열었더니 javascript 가 있고, 해당 javascript에서는 처음 html 파일을 다운로드 받은 서버(여기서는 파일)와 다른 접속이(fetch('http://localhost:8081)) 있는걸 확인하고 request header에 origin 값을 설정해서 보냄(여기서는 파일이라 origin 값이 null. origin 값이 없는게 아니라 null로 됨)
3. javascript 접속 요청을 받은 HTTP 서버(localhost:8081)는 Request header에 최초 origin이 null 인걸 확인. 하지만 자신에게 요청된 URL origin은 localhost:8081 이므로 최초 origin과 맞지 않으므로 자신의 CORS 정책을 browser로 내려 보내줌.
browser는 서버의 CORS 정책과 맞지 않음을 확인하고 CORS 오류 발생 시켜줌.
0
안녕하세요, 인프런 AI 인턴입니다. 인프린님.
CORS(Cross-Origin Resource Sharing)는 웹 브라우저가 스크립트가 요청한 리소스의 출처와 스크립트가 로드된 출처(Origin)가 다를 경우 이를 제어하기 위한 보안 기능입니다. 처음 브라우저에서 특정 웹페이지를 요청할 때는 Origin 헤더를 포함하지 않아도 되지만, 이후 해당 웹페이지의 JavaScript가 다른 리소스를 요청할 때는 Origin 헤더가 추가됩니다.
블로그의 JSON 데이터 요청에서 origin이 null로 보일 수 있으며, 이는 요청이 출처 정보가 없는 경우나 브라우저 설정의 영향일 수 있습니다. 그렇다면, CORS 에러는 서버가 해당 Origin을 허용하지 않음을 나타내는 것입니다.
CORS 에러는 서버가 브라우저에서 요청하는 출처를 허용하지 않을 때 발생합니다. 이 문제를 해결하기 위해, 서버에서 올바른 CORS 헤더를 설정해야 합니다. 예를 들어, FastAPI를 사용한다면 fastapi.middleware.cors.CORSMiddleware를 통해 CORS를 적절하게 설정할 수 있습니다.
아래의 링크에서는 CORS 설정에 대한 FastAPI 공식 문서의 예제입니다. 이를 참고하여 FastAPI 앱의 CORS 문제를 해결하실 수 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
"처음 브라우저에서 특정 웹페이지를 요청할 때는 Origin 헤더를 포함하지 않아도 되지만, 이후 해당 웹페이지의 JavaScript가 다른 리소스를 요청할 때는 Origin 헤더가 추가됩니다.
블로그의 JSON 데이터 요청에서 origin이 null로 보일 수 있으며, 이는 요청이 출처 정보가 없는 경우나 브라우저 설정의 영향일 수 있습니다. 그렇다면, CORS 에러는 서버가 해당 Origin을 허용하지 않음을 나타내는 것입니다."
이 부분이 애매한 거 같습니다.
강의에서 cors_request.html 파일을 직접 클릭한 건 해당 파일을 달라는 요청일 것이고 그 다음에 자바스크립트에서 /blogs/show_json/1로 다시 스크립트 요청을 한 것인데 origin이 null인건 서버단에서 origin 헤더를 내려주지 않아서 그런건가요 ?
1)그럼 이게 처음 요청하는건지 재요청을 한건데 origin 헤더가 null인건지는 어떻게 확인할 수 있나요 ?
2) 앞 강의에서 정상적으로 동작되던 것들은 (ex) delete요청시 fetch 이용) 어떻게 동작된 건가요 ? 이것들도 origin 헤더를 추가로 해주진 않았어서요.
답변 부탁드립니다 .
안녕하세요.
브라우저에서 최초에 서버로 요청을 날릴 때에도 origin 헤더가 null 아닌가요 ?
예를 들어 브라우저에서 처음에 index.html 파일을 request했을 때에 오류가 안 나던 것은 origin이 설정이 되어 있지 않아서 그런 걸로 아는데 파일에서 해당 api를 통해 접속을 할 때에도 origin이 null인데 왜 이건 에러가 나는지 궁금합니다.