webpack

webpack - devServer CORS 에러 설정

sinabeuro 2022. 3. 25. 13:44
728x90

 

프론트 어플리케이션에 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 설정으로 CORS 에러 해결 하기!

velog.io

 

webpack 공식 홈페이지

https://webpack.kr/concepts/

 

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

 

 

 

728x90