프론트앤드 백앤드통신 서버끼리 통신 (cors,nuxt.js,spring)

 

프론트앤드, 백앤드 각각 로컬환경에서 구동시켜서 둘이를 연동해서 사용했다. 

 

로컬에서 백앤드 api주소로 요청 보내고, 백앤드에서 cors 허용 프론트 url 을 허용했었는데 , 서버에 둘 다 올리고 보니

 

또 cors 정책 위반이라고 한다. 

 

백과 프론트가 서로 통신할 수 있게 설정하자 .

 

---

 

백앤드: spring (Maven)

 

application.properties에서  cors 허용, 내 프론트앤드 서버의 공인 ip와 포트를 적어 주었다. 

 

# CORS? ??? Origin ??
spring.web.cors.allow-credentials=true
spring.web.cors.allowed-origins=http://101.79.8.1:3000/
spring.web.cors.allowed-methods=GET,POST,PUT,DELETE,PATCH
spring.web.cors.allowed-headers=*

 

그 외 localhost:3000 -> 프론트서버:3000으로 사용하던 곳들을 다 바꿔 줬다.

 

application.properties에말고 addCorsMappings 만들어서도 사용가능, securityConfig 등등

@Configuration
public class CorsMvcConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry corsRegistry) {
        corsRegistry.addMapping("/**")
                .allowedMethods("GET", "PUT", "POST", "DELETE", "PATCH", "OPTIONS")
                .allowedHeaders("*")
                .exposedHeaders("Set-Cookie")
                .allowedOrigins("http://101.79.8.1:3000") // 여기
                .allowCredentials(true);
    }
}

 

 

프론트앤드 : nuxt.js 

 

nuxt.config.js에서 axios url을 서버 공인ip, 포트번호로 주었다.

 

modules: [
    '@nuxtjs/axios', // Axios 모듈 추가
  ],
  // Axios 모듈 설정
  axios: {
    baseURL: 'http://223.130.136.101:8000', // 환경 변수 또는 기본 URL 설정
  },

 

 

페이지에서 api로 요청할 때 url을 서버 ip로 바꾸어 주었다. 

 

fetchReservations() {
      // URL의 id 파라미터를 가져옵니다
      const id = this.$route.params.id;

      axios
        .get(`http://223.130.136.101:8000/myDining/reservations/${id}`)
        .then((response) => {
          // 응답 데이터를 reservations 배열에 저장합니다
          this.reserveRestaurantList = response.data;
          console.log("레저베이션" + this.reserveRestaurantList);
        })
        .catch((error) => {
          console.error("데이터를 불러오는 중 오류가 발생했습니다:", error);
        });
    },

 

 

env 파일을 사용한다면 거기도 바꿔 줄 것 

 

VUE_APP_API_URL=http://223.130.136.101:8000

 

 

서버에서 소스코드를 git pull 해서 사용했는데, git pull만 해서 돌려보니 업데이트가 반영 안된듯 하다. 

 

프로젝트 디렉토리를 지우고 git clone 다시해서 애플리케이션 돌려주니까 통신이 잘 됐다. 

 

 

예~