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 를 해결할 수 있게 됩니다.

 

 

 

https://velog.io/@jjhstoday/webpack-proxy%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EC%97%AC-CORS-%EC%97%90%EB%9F%AC-%ED%95%B4%EA%B2%B0-%ED%95%98%EA%B8%B0

[webpack] proxy를 사용하여 CORS 에러 해결 하기!

 

webpack 공식 홈페이지

https://webpack.kr/concepts/

Concepts | 웹팩

 

https://joshua1988.github.io/webpack-guide/devtools/webpack-dev-server.html#webpack-dev-server

Webpack Dev Server | 웹팩 핸드북

 

https://yamoo9.gitbook.io/webpack/react/create-your-own-react-app/configure-dev-server

개발 서버 구성 - Webpack 러닝 가이드