<div id="readability-page-1" class="page"><div>
 
 <div id="SE-34e8210b-6177-418f-b987-5a9210bc5c3e">
 <ol><li>CORS</li></ol>​이전 포스팅에서 설명한 SOP 정책으로 인해 기본적으로는 '동일 출처' 가 아닌 경우 리소스 요청시 브라우저에 의해 해당 리소스를 사용할수 없게 차단된다. ​만약, '동일 출처' 가 아닌 경우에 리소스를 요청하려면 어떻게해야 할까? 이때 필요한 개념이 CORS 라는 것이다.​​2. CORS 설정없이 테스트 (with. Springboot)​아래는 Springboot 의 간단한 controller 다. '동일 출처' 가 아닌곳에서 요청을 하기 위해 브라우저를 열고 네이버에 접속을 한 후, 개발자도구 - console 에서 fetch 함수를 통해 "http://localhost:8080/cors" 로 요청을 해보자.
 </div> <div id="SE-762f4952-5268-4ef2-866c-53655237d92b">
 @RequestMapping("/cors")
@RestController
class CorsController {
 @GetMapping("")
 fun main(): String = "cors controller"
}
 </div> <div id="SE-0afc4230-81c3-4a9f-a528-9744b6aea056">
 ​아래는 fetch 함수를 사용해 요청하는 코드다.
 </div> <div id="SE-967e4672-dcd3-4a67-bcd7-278d94c8df67">
 const response = await fetch("http://localhost:8080/cors");
const text = await response.text();
console.log(text);
 </div> <div id="SE-6d2df1b4-f40f-438a-b1f5-a68ffac5a3a1">
 그러면 브라우저에서 아래와 같은 에러를 볼수있다. 해석해보면 CORS Policy 로 인해 네이버에서 localhost:8080 으로의 요청이 막혔다는 내용이다.
 </div> <div id="SE-3f40df9d-a9f9-4e10-ae5b-063dff4a5454">
 <a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-3f40df9d-a9f9-4e10-ae5b-063dff4a5454&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyNTEwMDJfMjQw/MDAxNzU5MzgxMTQ3OTcx.TRt0QYeO9ilPhsdYkkrluUgZmrzybYQsnyXK_DnMk_Qg.Dvo-foINFTP114pUJ8jjcCLvi2PqSKByJFMQ_fh-m8Yg.PNG/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2025-10-02_%EC%98%A4%ED%9B%84_1.59.04.png&quot;, &quot;originalWidth&quot; : &quot;1503&quot;, &quot;originalHeight&quot; : &quot;128&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot; }">
 <img src="https://mblogthumb-phinf.pstatic.net/MjAyNTEwMDJfMjQw/MDAxNzU5MzgxMTQ3OTcx.TRt0QYeO9ilPhsdYkkrluUgZmrzybYQsnyXK_DnMk_Qg.Dvo-foINFTP114pUJ8jjcCLvi2PqSKByJFMQ_fh-m8Yg.PNG/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2025-10-02_%EC%98%A4%ED%9B%84_1.59.04.png?type=w800" data-width="693" data-height="59" alt="">
 </a>
 
 </div>
 <div id="SE-6b69a199-2704-4c54-be2d-3ac234cac516">
 ​​3. CORS 설정과 함께 테스트 (with. Springboot)​자, 이제 Springboot 에서 Cors 설정을 해보자. 여러가지 방법이 있지만, 여기서는 간단히 @CrossOrigin 어노테이션을 사용해서 진행하려 한다. 아래와 같이 @CrossOrigin 어노테이션에 네이버 도메인을 적어주자.
 </div> <div id="SE-03c334d0-569d-4816-b651-691cbb4eec06">
 @CrossOrigin("https://www.naver.com")
@RequestMapping("/cors")
@RestController
class CorsController {
 @GetMapping("")
 fun main(): String = "cors controller"
}
 </div> <div id="SE-36a9f8e6-5aef-421b-b3e5-a374cf2af6b2">
 그리고, 다시 fetch 함수를 실행해보자. 그러면, console 창에 에러도 없고 네트워크 창에서 response 가 잘 온걸 볼수있다.
 </div> <div id="SE-5841b1cc-fd64-4ab0-a6e7-e69915a0b149">
 <a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-5841b1cc-fd64-4ab0-a6e7-e69915a0b149&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyNTEwMDJfMjk2/MDAxNzU5MzgxNTIwMTg0.8OxIH2xmsz7Gq9pUXuPXHlIYRe95Z0XnbB-qn2H-_kUg.5zrpR5fOjTSHCOWIGmcaZSeXAUDXtl6YKW76o2d9nG4g.PNG/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2025-10-02_%EC%98%A4%ED%9B%84_2.05.17.png&quot;, &quot;originalWidth&quot; : &quot;827&quot;, &quot;originalHeight&quot; : &quot;343&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot; }">
 <img src="https://mblogthumb-phinf.pstatic.net/MjAyNTEwMDJfMjk2/MDAxNzU5MzgxNTIwMTg0.8OxIH2xmsz7Gq9pUXuPXHlIYRe95Z0XnbB-qn2H-_kUg.5zrpR5fOjTSHCOWIGmcaZSeXAUDXtl6YKW76o2d9nG4g.PNG/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2025-10-02_%EC%98%A4%ED%9B%84_2.05.17.png?type=w800" data-width="693" data-height="287" alt="">
 </a>
 
 </div>
 <div id="SE-ab7e182f-77ee-4b4b-97ed-9d03aa9b5534">
 ​4. access-control-allow-origin 헤더​이 포스트에서는 Springboot 를 사용하다보니 Springboot 에서 제공해주는 @CrossOrigin 이라는 어노테이션을 사용해서 SOP 문제를 해결했다. 만약, Springboot 가 아니라면 어떻게 해야할까? CORS 의 근본적인 동작방식은 access-control-allow-origin 헤더에 있다.
 </div> <div id="SE-bc6a932b-e403-423b-9499-0c491a3376d6">
 <a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-bc6a932b-e403-423b-9499-0c491a3376d6&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyNTEwMDJfMjUz/MDAxNzU5MzgxNjU3MTE5.QYT1qYlDb4LqwGGzx94UZPKVn7BFVRXwlQcQYfi833Ug.usXRko34FBcVppU0-dmrrPoIqlg9gqeqReQOAjVtaucg.PNG/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2025-10-02_%EC%98%A4%ED%9B%84_2.07.32.png&quot;, &quot;originalWidth&quot; : &quot;619&quot;, &quot;originalHeight&quot; : &quot;200&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot; }">
 <img src="https://mblogthumb-phinf.pstatic.net/MjAyNTEwMDJfMjUz/MDAxNzU5MzgxNjU3MTE5.QYT1qYlDb4LqwGGzx94UZPKVn7BFVRXwlQcQYfi833Ug.usXRko34FBcVppU0-dmrrPoIqlg9gqeqReQOAjVtaucg.PNG/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2025-10-02_%EC%98%A4%ED%9B%84_2.07.32.png?type=w800" data-width="619" data-height="200" alt="">
 </a>
 
 fetch 요청에 대한 response headers
 </div>
 <div id="SE-19118560-8298-4600-ad8e-7a85747fe2dd">
 위 캡쳐화면은 fetch 함수를 통해 요청했을때의 response headers 다. 잘 보면, Access-Control-Allow-Origin 이라는 헤더가 있고 거기에 'https://www.naver.com' 이 적힌걸 볼 수 있다.​즉, springboot 의 @CrossOrigin 어노테이션은 내부적으로 저 헤더를 response header 에 추가해주는 것이다.그러면, 브라우저는 https://www.naver.com 으로부터 오는 요청에 대해서는 허용해주게 된다.​실제로 다시 @CrossOrigin 어노테이션을 삭제하고 테스트해보면 Access-Control-Allow-Origin 헤더가 없는걸 볼 수 있다.​​​​#CORS #SpringBootCors #SpringBootCrossOrigin #http완벽가이드
 </div> </div></div>

나만의공간。

KIM JUNGHWAN

CORS 이전 포스팅에서 설명한 SOP 정책으로 인해 기본적으로는 '동일 출처' 가 아닌 경우 리소스 요청시 브라우저에 의해 해당 리소스를 사용할수 없게 차단된다. 만약, '동일 출처' 가 아닌 경우에 리소스를 요청하려면 어떻게해야 할까? 이때 필요한 개념이 CORS 라는 것이다. 2. CORS 설정없이 테스트 (with. Springboot) 아래는 Springboot 의 간단한 controller 다. '동일 출처' 가 아닌곳에서 요청을 하기 위해 브라우저를 열고 네이버에 접속을 한 후, 개발자도구 - console 에서 fetch 함수를 통해 "http://localhost:8080/cors" 로 요청을 해보자. 아래는 fetch 함수를 사용해 요청하는 코드다.......

[HTTP] CORS 의 동작원리

댓글