230216 Spring Boot VSCODE와 STS연결 -CORS

VSCode와 STS연결

 

vscode react-router

App.js

import axios from "axios";

const App=()=>{

    const handleClick= async()=>{
        const data={"num":30,"id":"kier","name":"키에르"};
      const result=await axios.post("http://localhost:8383/getJson", data); 

      console.log(result);
    }


    return(
        <div>
            <input type="button" onClick={handleClick} value="데이터요청하기"/>
        </div>
    )
}

export default App;

 

 

RestBasicController.java

//값을 받는 방법1 - post형은 VO로 맵핑
//JSON형식의 데이터를 자바의 객체로 맵핑 ->@RequestBody
//{"num":30,"id":"kier","name":"키에르"}
	
//cors-기본적으로 서버가 다르면 요청을 거절하는데(특정 서버의 요청에 대하여 허용)
//@CrossOrigin(*) or 필터를통한 자바설정
 @CrossOrigin("http://localhost:3000")
 @PostMapping("/getJson")
 public String getJson(@RequestBody SimpleVO vo) {
	 System.out.println(vo.toString());
	 return "success"; 
 }

서버와 서버의 도메인이 다르면 자동으로 블락. 보안 때문에. 
cors(Cross origin resources sharing -같은 서버에서만 코드를 sharing한다.)

@CrossOrigin("")으로 열 수 있다.
특정 주소만 허용할 수도 있고, *를 하면 모든 주소를 허용한다.
서버가 다르더라도 허용을 시켜주므로, 함부로 열면 안된다.

 

버튼을 누르면 콘솔창 실행

 

---

Spring Security와 JWT
API 서버 개발자라면 알아야 하는 preflight와 cors(Cross origin resources sharing)의 개념

정리를 잘해놓은 블로그를 링크합니다.

https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-CORS-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC-
%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95-%F0%9F%91%8F