webpack - devServer CORS 에러 설정
프론트 어플리케이션에 webpack devServer를 적용하고
다른 어플리케이션의 api를 호출하거나 외부 api를 호출하면 무조건 CORS 에러가 발생합니다.
webpackconfig.js 설정 파일을 다음과 같이 수정해야합니다.
// webpack.config.js
const path = require("path");
const webpack = require("webpack");
const isProduction = process.env.NODE_ENV == "production";
...
const config = {
...
devServer: {
open: true,
host: "localhost",
hot: true, // 자바스크립트나 CSS 스타일시트를 변경하면 해당 모듈이 바로 업데이트가 됩니다.
client: {
overlay: false,
// overlay: {
// errors: true,
// warnings: false,
// },
},
port: 8081,
proxy: {
'/news': { // /item/main.naver로 시작하는 url은 아래의 전체 도메인을 설정하고, 추가로 옵션을 적용
target: 'https://api.hnpwa.com', // 설정할 도메인
changeOrigin: true, // cross origin 허용 설정
},
}
},
...
}
devServer의 proxy 속성에 호출할 외부 url 일부를 기재합니다.
예를 들면 "https://api.hnpwa.com/v0/news/1.json" url을 호출한다면,
proxy 설정에 의해 request 도메인이 교체 됩니다.
설정된 port가 8081이라면 로컬에서 "http://localhost:8081/" 도메인 url로 보내져야하지만
proxy 설정에 의해서 "https://api.hnpwa.com" 으로 변경됩니다.
이러한 proxy 설정을 통해서 외부 api를 사용할 수 있게 되는 것이죠.
또한 changeOrigin: true 옵션 설정에 의해서 CORS 를 해결할 수 있게 됩니다.
[webpack] proxy를 사용하여 CORS 에러 해결 하기!
📚 webpack 설정으로 CORS 에러 해결 하기!
velog.io
webpack 공식 홈페이지
Concepts | 웹팩
웹팩은 모듈 번들러입니다. 주요 목적은 브라우저에서 사용할 수 있도록 JavaScript 파일을 번들로 묶는 것이지만, 리소스나 애셋을 변환하고 번들링 또는 패키징할 수도 있습니다.
webpack.kr
https://joshua1988.github.io/webpack-guide/devtools/webpack-dev-server.html#webpack-dev-server
Webpack Dev Server | 웹팩 핸드북
Webpack Dev Server 웹팩 데브 서버는 웹 애플리케이션을 개발하는 과정에서 유용하게 쓰이는 도구입니다. 웹팩의 빌드 대상 파일이 변경 되었을 때 매번 웹팩 명령어를 실행하지 않아도 코드만 변경
joshua1988.github.io
https://yamoo9.gitbook.io/webpack/react/create-your-own-react-app/configure-dev-server
개발 서버 구성 - Webpack 러닝 가이드
지금까지 애플리케이션의 프로덕션 빌드를 만들고 최적화하는 데 중점을 두었지만, Webpack은 핫 모듈 교체(HMR) 및 오류 보고 기능이 있는 개발 서버를 제공하고 있습니다. 이 서버를 사용하면 개
yamoo9.gitbook.io