1. 서로 다른 사이트간의 통신(fetch)
mms 와 imsapi / smsapi 간의 통신
- mms의 index.jsp에 통신 버튼을 만들고 그 버튼의 onclick이벤트 함수를 정의한다.
1-1) imsapi의 모든 item 가져오기
<index.jsp>
=================================================================
<body>
<button onclick="getItemAll()">imsapi의 모든 item 가져오기</button>
<script type="text/javascript">
function getItemAll(){
// fetch통신을 위한 url 설정
let url = "http://localhost:9001/item/all"; //imsapi 서버의 item 전부를 조회하는 url
// fetch 통신을 위한 옵션 설정
let options = {
method : "GET", // 데이터를 조회하므로 GET
headers : {"Content-Type" : "application/json"
}
}
fetch(url, options) //fetch 통신 시작
.then(res =>{ // fetch 통신 결과를 response로 받음. res는 reponse의 약자임.
if(!res.ok){ // fetch 통신 결과가 ok가 아니면 실패했다는 의미임.
alert("실패");
throw new Error("에러 발생");
}
return res.json(); // fetch 통신 결과가 ok이면, 넘겨받은 데이터를 json으로 변환시킴
})
.then(data => {
alert("조회 성공")
console.log(data.list);
})
.catch(error=>{ // 통신 자체가 안 되었거나, 통신이 성공한 후에 추가작업에 문제가 있을 때 호출됨.
alert(111)
console.log(error);
})
}
</script>
</body>
1-2) smsapi에 staff데이터 한 개 추가하기
<index.jsp>
==========================================================================
<body>
<button onclick="insertAStaff()">smsapi에 staff 데이터 1개 추가하기</button>
<script type="text/javascript">
function insertAStaff(){
let url = "http://localhost:9002/staff";
let options = {
method : "POST",
headers : {
"Content-Type" : "application/json"
}
}
if(options.method !=="GET"){
options.body = JSON.stringify({ // 추가할 데이터의 정보
username : "m017",
password : "1",
password2 : "1"
})
}
fetch(url, options)
.then(res =>{
if(!res.ok){
alert("입력 실패");
throw new Error("입력 실패로 에러 발생");
}
return res.json();
})
.then(data => {
alert("입력 성공");
console.log(data);
})
.catch(error=>{
alert(111)
console.log(error.message);
})
}
</script>
</body>
1-3) smsapi의 staff중 username이 m017인 데이터의 비번 변경
<index.jsp>
==========================================================================
<body>
<button onclick="updatePwStaff()">smsapi의 staff 중 username이 m017인 데이터의 비번 변경</button>
<script type="text/javascript">
function updatePwStaff(){
let url = "http://localhost:9002/staff";
let options = {
method : "PUT",
headers : {
"Content-Type" : "application/json"
}
}
if(options.method !=="GET"){
options.body = JSON.stringify({ // 수정할 정보 내용
username : "m017",
orgPassword : "2",
password : "0",
password2 : "0"
})
}
fetch(url, options)
.then(res =>{
if(!res.ok){
alert("수정 실패");
throw new Error("수정 실패로 에러 발생");
}
return res.json();
})
.then(data => {
alert("수정 성공");
console.log(data);
})
.catch(error=>{
alert(111)
console.log(error.message);
})
}
</script>
</body>
2. 1번 상태로 버튼을 눌렀을 시 CORS에러 발생
해결하기 위해 WebMvcConfigurer를 상속하는 WebMvcConfigurer 클래스를 만들어 서비스 요청을 받은 imsapi, smsapi서버에 아래를 추가한다.
@Configuration
public class WebMvcConfiguerImpl implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("http://localhost:9000")
.allowedMethods("GET", "POST", "PUT", "DELETE")
.allowedHeaders("*")
.allowCredentials(true) //인증정보 허용
.maxAge(3600); //초 단위고 3600초 1시간동안 열어두겠다는 뜻
}
}
'스프링부트(Spring Boot)' 카테고리의 다른 글
| Member 생성 및 CRUD 작업 (mmsapi 프로젝트) (0) | 2023.04.12 |
|---|---|
| Staff 생성 및 CRUD작업 (smsapi 프로젝트) (0) | 2023.04.12 |
| Item CRUD작업 (0) | 2023.04.12 |
| Item 생성 (imsapi 프로젝트) (0) | 2023.04.11 |
