Access-Control-Allow-Origin 헤더가 없는데 CORS에러가 안나는 이유

영상 6분쯤에 나오는 zerocho사이트에서 인터파크에 요청한 이미지(보라색 아이콘)입니다

책이미지가 나왔던걸로 기억합니다

인터파크 이미지는 외부 사이트여도 simple request라서 cors에 걸리지 않습니다. response header에 Access-Control도 없습니다.

simple request라면 응답에서 Access-Control-Allow-Origin헤더가 있어야 하지 않나요?

image 태그의 경우는 넣지 않아도 됩니다.

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#what_requests_use_cors

여기 것들만 cors가 적용됩니다.

저 요청이 simple request라면 preflight만 발생시키지 않고 어쨌든 응답에서 Access-Control-Allow-Origin헤더를 포함시켜야 하지 않나요? cors를 발생시키지 않은 이유가 simple request이기 때문은 아니라고 생각됩니다.

위에 링크 올려드렸습니다

넵 확인했습니다. 그래서 저는 cors검사를 하지 않은 이유가 simple request인 것과 무관하다고 생각하는데 맞나요?

no-cors모드는 cors정책을 비활성화하는 대신에 요청에 제약 사항들이 있고 반대로 cors모드는 cors정책을 준수하고 검사하는 모드인 것 같습니다. 따라서 인터파크 이미지 요청은 no-cors모드라서 cors검사를 실시하지 않고 데이터를 가져온 거 같은데 어떻게 생각하시나요?

이미지는 애초에 cors검사 대상이 아니었으니 cors냐 no-cors냐 따지는 게 의미가 없죠.

no-cors 모드라는 용어를 어디에서 참고해서 쓰시는 건가요? 이것때문에 매우 헷갈립니다.

외부 오리진의 데이터를 가져오는 데는 다음과 같이 셋으로 나뉜다고 보시면 됩니다.

• cors 적용을 받지 않는 것들(이미지)

• simple request

• preflight

모드는 해당 요청 헤더에 Sec-Fetch-Mode로 들어가 있어요.

no-cors 모드에 cors정책을 비활성화한다는 말은 없습니다. 그냥 쓸 수 있는 메서드와 헤더를 제한하는 것 뿐이죠

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-Fetch-Mode
이거 때문에 괜히 모드에 집착 했네요.

부가적인 기능을 하긴 하는데 중요한건 img태그에 src로 들어가는 url요청은 말씀해주신 것처럼 cors 예외 사항입니다. 😃 번거롭게 해서 죄송합니다ㅠ

** 찾아보면서 알아낸 것

만약 태그 속성에 crossOrigin 옵션을 넣으면 cors요청이 되고 현재 url은 서버에서 cors옵션을 제공하지 않아서 cors에러가 뜹니다.

각각 위, 아래

당연히 fetch로 해당 이미지를 불러와도 해당 이미지 요청은 서버에서 cors를 지원하지 않기 때문에

cors에러가 뜹니다.

억지로 cors를 사용하지 않으면 fetch는 성공하긴 하지만 응답을 찍어보면

opaque type이라고 js에서는 접근할 수 없는 데이터가 됩니다.

왜 이렇게 img태그에서만 cors예외로 되어있는지는 img태그의 역사적인? 이유와 일부 리소스를 허용해야하는 cors 메커니즘 때문이라고 하는데 잘 모르겠습니다.

자세한 내용은 링크에 있습니다.

https://chromium.googlesource.com/chromium/src/+/master/services/network/cross_origin_read_blocking_explainer.md#what-kinds-of-requests-are-corb_eligible

한줄요약: img 태그로 요청을 하는 경우 cors검사의 예외다

img가 워낙 외부 링크를 많이 가져오기도 하고, 그 링크들은 거의다 cors 허용되어있지 않아 막는 경우에는 웹사이트 대부분이 깨지게 되어 어쩔 수 없이 img와 script만 기본적으로 허용한 것이 아닐까 싶습니다.

https://developer.mozilla.org/en-US/docs/Web/API/Request/mode#no-cors

반대로 no-cors인 경우에 브라우저에서 cors 검사를 실행합니다.