Spring boot - ajax 통신시 발생하는 문제 - SOP(Same Origin Policy) Feat. Synology NAS

우선, SOP가 뭐냐? wiki 백과 왈 ~
In computing, the same-origin policy is an important concept in the web application security model. Under the policy, a web browser permits scripts contained in a first web page to access data in a second web page, but only if both web pages have the same origin. 

same-origin policy는 웹어플리케이션 보안 모델에서 중요한 개념이라고 한다.
웹 브라우저는 첫 번째 웹 페이지에 포함 된 스크립트가 두 번째 웹 페이지의 데이터에 접근하는 것을 허용하지만 두 웹페이지 모두 동일한 출처를 갖는 경우에만 허용된다고 한다.


그렇다면 , 동일한 출처가 뭐냐?
프로토콜/호스트/포트 가 동일한가 라고 한다.
예를들어, http://abc.dfg.com/temp/index.html 과 동일한 출처를 알아보자.

http://abc.dfg.com/temp/login.html    =>  동일한 출처.
http://abc.dfg.com/temp2/fake.html   =>  동일한 출처.

https://abc.dfg.com/temp/real.html    =>  프로토콜이 다르다. 따라서 동일한 출처가 아니다.
http://abc.dfe.com:123/temp/isReal.html   => 포트가 다르다. 따라서 동일한 출처가 아니다.
http://dfe.abc.com/temp/good.html   =>   호스트가 다르다.   따라서 동일한 출처가 아니다.



넘어가서,, 내가 맞닥뜨린 문제는.. 아래이다.

현재 나는 synology에 apache http 서버와 tomcat was 서버를 동시에 돌리고 있다.
그리고 문제가 발생하는 구조는
http://ndgndg91.synology.me   ==> http://ndgndg91.synology.me:7070/accbook-0.0.1/user/login
으로 요청하고 있다.

이 과정에서 SOP를 따르고 있지 않다.

프로토콜, 호스트가 같지만 포트(8080 != 7070)가 다르다.

tomcat에 올라가 있는 어플리케이션은 spring boot로 만들었다.
Apache에서도 설정을 해주었다.
따라서 이에 대한 해결 방안을 적어본다.


Apache 설정
Synology NAS를 기준으로 설명하려고 한다.
이미 ssh 접속이 가능하게 하는 설정은 다 되어있다고 여기고 생략한다.

ssh admin@자기호스트.synology.me (NAS의 DDNS와 관리자아이디 입력)
패스워드는 DSM의 admin 패스워드와 동일

(root 권한으로 로그인)
sudo -i

(아파치 설정파일 수정)
vi /volume1/@appstore/Apache2.4/usr/local/etc/apache24/conf/httpd24.conf

(httpd24.conf에 다음설정구문 추가하여 저장)
아래 vi editor 사용법 참고

<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-headers "Range"
Header set Access-Control-Expose-headers "Date, Content-Length, Content-Range"
</IfModule>

(아파치 재시작)
synoservice --restart pkgctl-Apache2.2

참고 : http://www.academyck.com/synology_set.txt

Spring boot 설정

아래와 같이 Global 설정

@Configuration

public class WebMVCConfigurer implements WebMvcConfigurer {

@Override

public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping("/**")
            .allowedOrigins("http://ndgndg91.synology.me")
            .allowedMethods(HttpMethod.POST.name())
            .allowCredentials(false)
            .maxAge(3600);}

}

아래와 같이 Controller 단에서 설정

@CrossOrigin("http://ndgndg91.synology.me")
@RestController@RequestMapping(value = "/user")
@Api(value = "UserController", description = "사용자 관련 API",basePath = "/user")
public class UserController {

이상 허접의 블로깅이였습니다.