CORS

CORS 란? Cross-Origin Resource Sharing, CORS 다른 출처의 자원을 공유할 수 있도록 설정하는것을 말합니다. CORS를 제대로 설정하지 않으면 원하는 리소스를 공유받지 못한다. CORS 문제를 Spring으로 해결하는 방법을 체크해본다. Configuration 해결하기 addMapping registry.addMapping 을 이용해서 CORS를 적용할 URL패턴을 정의할 수 있다. 아래처럼 "/**" 와일드 카드를 사용할 수 있다. @Configuration public class WebConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { regi..

개요 https://github.com/lllilllilllilili/video-intelligence-demo-app GitHub - lllilllilllilili/video-intelligence-demo-app: 영상 데이터 분석을 합니다. 영상 데이터 분석을 합니다. Contribute to lllilllilllilili/video-intelligence-demo-app development by creating an account on GitHub. github.com 이 프로젝트를 Clone받아서 API 테스트 중 자동화 되지 않고 있어서(영상 업로드 > 전처리 > 결과 파일 Web에 렌더링) 자동화를 시키는것을 목표로 프로젝트를 진행했습니다. 문제발생 자동화를 위해 처음 생각한 아키텍처는 동..

ㅡ. 도입 google bigQuery 데이터를 node.js에서 fetch해서 vue.js 로 데이터를 뿌려주는 워크플로우 ㅡ. 문제 CORS 문제 node.js에서 express 를 사용하고 있었기 때문에 아래와 같이 cors 패키지를 설치했음에도 $ npm install --save cors const cors = require('cors'); //app.js app.use(cors()); //app.js Same-origin policy 라는 에러를 뿜어냈습니다. 호스트는 ip + port 를 의미하는데, port 가 달라지면서 (vue.js:8090, node.js:3000) 동일 호스트에서 호출받는 정책이 깨지면서 에러가 발생하였습니다. 즉, 호스트와 오리진이 서로 다른것입니다. 여기서 의미하..

Google Place API 를 쓰던 도중에 Vue.js 에서 Spring boot 연동된 상태였는데, 기존에 통신하고 있는 port와 다른 google과 cross 통신하려고 해서 발생했던 문제였습니다. 이를 해결하기 위해서 AXIOS Url 앞에 https://cors-anywhere.herokuapp.com/을 사용하였습니다.