"웹 서비스 개발 중 마주했던 CORS(Cross-Origin Resource Sharing)"

 너무 잘 정리되어 있어 내용을 그대로 퍼왔습니다.
 원문 참고
 : https://ithub.tistory.com/63
 : https://velog.io/@jmkim87/%EC%A7%80%EA%B8%8B%EC%A7%80%EA%B8%8B%ED%95%9C-CORS-%ED%8C%8C%ED%97%A4%EC%B3%90%EB%B3%B4%EC%9E%90

 

1. CORS(Cross-Origin Resource Sharing) 이란?

 : CORS는 Cross-Origin Resource Sharing의 약자로 보안상의 이유로, 브라우저들은 스크립트 내에서 초기화되는 cross-origin HTTP 요청을 제한합니다. 예를 들면 다음과 같습니다.

 위 예제에서 사이트의 도메인은 www.a.com인데 Ajax를 할 경우 www.b.com처럼 다른 도메인에 보낼 경우 CORS 관련 에러가 납니다. 아래는 Same-origin이 되는 조건에 대해서 보여줍니다.
(참고 : https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy)

기준 url : http://store.company.com/dir/page.html

 

2. 해결 방법?

* jsonp(json with padding)를 통한 해결

• JSONP는 HTML의 script 요소로부터 요청되는 호출에는 보안상 정책이 적용 안되는 것을 이용한 우회 방법입니다.
• jQuery에서 ajax 사용시 type에 jsonp로 요청하면 됩니다.
• 단점으로는 GET방식에서만 사용 가능합니다.

* Proxy 서버를 두는 방법

• 중간에 Proxy 서버를 두는 것인데 솔직히 이 방법으로 할 바에는 서버 설정 건드는게 좋다고 생각합니다.

* jquery.ajaxPrefilter() 사용 방법

• 1번에서 써던 방식과 흡사하지만 ajax에는 json으로 설정해두고 통신할때 prefilter에서 jsonp로 속여서 보내는 방식
• jQuery 1.5 이상에서 crossDomain 옵션도 true로 설정해줘야 합니다.

* 서버에서 Access-Control-allow-origin 설정을 통한 요청 허용

• apache

  • httpd.conf에서 mod_headers.c 쪽에 설정을 넣어주면 됩니다.

  • 또는 VirualHost 부분에 넣어도 됩니다.

    <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule>

• nginx

  • nginx.conf 파일 안에 location / 부분에 add_header로 넣어주면 됩니다.

    location / { #root html; root e:/; add_header 'Access-Control-Allow-Origin' '*'; index index.html index.htm; }

• AWS

  • S3

    • S3같은 경우는 권한 부분에 CORS 설정 하는 부분이 있습니다. 그곳에 다음과 같이 설정 하시면 됩니다.

      http://www.example1.comGETPUTPOSTDELETE*

  • CloudFront

    • CloudFront는 Behavior 부분에서 Cache Based on Selected Request Headers을 whitelist로 변경 후
      아래 whitelist에서 Origin을 추가해주면 됩니다.

위 4가지를 알아보았습니다만 가장 간편하면서 명확한 방법은 4번입니다.
1, 2, 3번을 하기 전에 4번이 가능하다면 4번으로 진행하시는게 속이 편하실껍니다.

 

작성자분은 서버에서 처리하는 방식을 추천해주셨고 저 또한 실무 프로젝트 때 API Controller 자바 파일 내 클래스와 메소드 어노테이션을 사용하여 처리했던 경험이 있습니다.
 - @CrossOrigin(origins = "허용주소:포트") 
 - @CrossOrigin(origins = "*")


참고자료

• 스프링에서 RESTful Web Service 사용시, 크로스도메인 이슈 해결방법
  - https://spring.io/guides/gs/rest-service-cors/
• Cross-origin resource sharing 설명
  - https://en.wikipedia.org/wiki/Cross-origin_resource_sharing