728x90
반응형
작성일자 : 2022.06.19
환경 : vue 2, webpack-dev-server 4.8.1
시나리오 : 프록시를 활용하여 CORS 해결
관련 포스팅 : https://osc131.tistory.com/118
1. webpack-dev-server 확인
package-lock.json
"webpack-dev-server": {
"version": "4.8.1"
...
...
}
사용하고 있지 않을 시 모듈 추가 필요
2.Proxy 설정 추가
vue.config.js
module.exports = {
devServer: {
proxy: {
// /api 및 /api/* 요청에 대해 프록시 설정
'/api': {
target: 'http://localhost:8080', // 프록시를 설정할 도메인
changeOrigin: true,
},
},
},
}
위 설정 이후 http://localhost:8080/api/* 에 대해 CORS 가 허용됨
* 주의 : 프록시 설정 이후 요청할 때 도메인 정보는 생략해야함
ex)
const uri = '/api'; // 'http://localhost:8080/api' 로 작성 시 프록시 적용 X
fetch(uri, {method: 'get'})
.then(response => response.json())
.then(response => {
alert(response);
})
728x90
반응형
'TroubleShooting' 카테고리의 다른 글
[Vue] You are using the runtime-only build of Vue where the template compiler is not available. (0) | 2020.09.07 |
---|---|
[IntelliJ] Git 관련 작업 시 hangs on/Holding (0) | 2020.06.16 |
[Java-stream] Map 변환 중 Duplicate key (0) | 2020.06.13 |
[Spring] Expiring Daemon because JVM heap space is exhausted (0) | 2020.03.27 |
[Windows] 특정 포트 사용중인 프로세스 종료 (0) | 2019.12.26 |