Error: error:0308010C:digital envelope routines::unsupported 발생 시 해결방법

digital envelope routines::unsupported  발생 시 해결방법 

React 관련 Proxy 설정
기본적으로 React 프로젝트는 3000번 포트에서 작동되기 때문에 CORS 관련한 오류를 방지하기 위해서 Proxy를 설정해주어야 하는데...

CORS(Cross-Origin Resource Sharing) 오류와 관련된 내용을 간단히 설명하자면 동일출처에서 데이터 요청을 하지 않았기 때문에 발생하는 오류이다. 

다시말해서
CORS오류는 웹 애플리케이션이 다른 도메인, 프로토콜 또는 포트에서 리소스를 요청할 때 발생하는 보안 정책인데요.
브라우저는 보안상의 이유로 기본적으로 다른 출처에서 리소스를 요청하는 것을 제한하며, 이때 CORS 오류가 발생할 수 있습니다.
이를 해결하기 위해서는 서버 측에서 올바른 CORS 헤더를 설정하거나 프록시 서버를 사용하여 요청을 전달하는 방법 등을 사용할 수 있습니다.


다시말해서 React와 Spring은 localhost라는 ip는 같지만 포트번호가 다르기 때문에 동일 출처로 판단하지 않아서 발생하는 오류를 해결하기 위한것이다.

이러한 부분을 방지하기 위해 Proxy 설정을 해보자.

//미들웨어 설치
$ npm install http-proxy-middleware --save

npm 으로 설치가 완료되었으면 다음 경로에 setupProxy.js 파일을 생성하고 아래의 코드를 작성하면된다.

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
    app.use(
        '/api',
        createProxyMiddleware({
            target: 'http://localhost:8080',	// 서버 URL or localhost:설정한포트번호
            changeOrigin: true,
        })
    );
};

그런데...여기서 react 세팅 시 아래와 같은 에러를 확인했다. OTL

D:\project\todayis\src\main\todayis>npm start

> todayis@0.1.0 start
> react-scripts start
Starting the development server...

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:80:19)
    at Object.createHash (node:crypto:139:10)
    at module.exports (D:\project\todayis\src\main\todayis\node_modules\webpack\lib\util\createHash.js:90:53)
    at NormalModule._initBuildHash (D:\project\todayis\src\main\todayis\node_modules\webpack\lib\NormalModule.js:401:16)
    at handleParseError (D:\project\todayis\src\main\todayis\node_modules\webpack\lib\NormalModule.js:449:10)
    at D:\project\todayis\src\main\todayis\node_modules\webpack\lib\NormalModule.js:481:5
    at D:\project\todayis\src\main\todayis\node_modules\webpack\lib\NormalModule.js:342:12
    at D:\project\todayis\src\main\todayis\node_modules\loader-runner\lib\LoaderRunner.js:373:3
    at iterateNormalLoaders (D:\project\todayis\src\main\todayis\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
    at iterateNormalLoaders (D:\project\todayis\src\main\todayis\node_modules\loader-runner\lib\LoaderRunner.js:221:10)
    at D:\project\todayis\src\main\todayis\node_modules\loader-runner\lib\LoaderRunner.js:236:3
    at runSyncOrAsync (D:\project\todayis\src\main\todayis\node_modules\loader-runner\lib\LoaderRunner.js:130:11)
    at iterateNormalLoaders (D:\project\todayis\src\main\todayis\node_modules\loader-runner\lib\LoaderRunner.js:232:2)
    at Array.<anonymous> (D:\project\todayis\src\main\todayis\node_modules\loader-runner\lib\LoaderRunner.js:205:4)
    at Storage.finished (D:\project\todayis\src\main\todayis\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:55:16)
    at D:\project\todayis\src\main\todayis\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:91:9
D:\project\todayis\src\main\todayis\node_modules\react-scripts\scripts\start.js:19
  throw err;
  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:80:19)
    at Object.createHash (node:crypto:139:10)
    at module.exports (D:\project\todayis\src\main\todayis\node_modules\webpack\lib\util\createHash.js:90:53)
    at NormalModule._initBuildHash (D:\project\todayis\src\main\todayis\node_modules\webpack\lib\NormalModule.js:401:16)
    at D:\project\todayis\src\main\todayis\node_modules\webpack\lib\NormalModule.js:433:10
    at D:\project\todayis\src\main\todayis\node_modules\webpack\lib\NormalModule.js:308:13
    at D:\project\todayis\src\main\todayis\node_modules\loader-runner\lib\LoaderRunner.js:367:11
    at D:\project\todayis\src\main\todayis\node_modules\loader-runner\lib\LoaderRunner.js:233:18
    at context.callback (D:\project\todayis\src\main\todayis\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at D:\project\todayis\src\main\todayis\node_modules\babel-loader\lib\index.js:51:103 {
  opensslErrorStack: [
    'error:03000086:digital envelope routines::initialization error',
    'error:0308010C:digital envelope routines::unsupported'
  ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v20.12.1

이게 왜 발생한거지? 고민후에 해결책을 찾았는데...찾다보니 아래 해결책을 알게되었다.
https://www.freecodecamp.org/news/error-error-0308010c-digital-envelope-routines-unsupported-node-error-solved/

Error: error:0308010c:digital envelope routines::unsupported [Node Error Solved]

그래서 바로 아래명령어를 통해서 react-script 를 업데이트 해주었다.

$ npm install --save --save-exact react-scripts@latest

D:\project\todayis\src\main\todayis>npm install --save --save-exact react-scripts@latest
npm WARN deprecated @babel/plugin-proposal-private-methods@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-methods instead.
npm WARN deprecated @babel/plugin-proposal-nullish-coalescing-operator@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-nullish-coalescing-operator instead.
npm WARN deprecated @babel/plugin-proposal-numeric-separator@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-numeric-separator instead.
npm WARN deprecated @babel/plugin-proposal-class-properties@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.
npm WARN deprecated @babel/plugin-proposal-optional-chaining@7.21.0: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-chaining instead.
npm WARN deprecated rollup-plugin-terser@7.0.2: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-terser
npm WARN deprecated domexception@2.0.1: Use your platform's native DOMException instead
npm WARN deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead
npm WARN deprecated workbox-cacheable-response@6.6.0: workbox-background-sync@6.6.0
npm WARN deprecated workbox-google-analytics@6.6.0: It is not compatible with newer versions of GA starting with v4, as long as you are using GAv3 it should be ok, but the package is not longer being maintained

added 565 packages, removed 761 packages, changed 376 packages, and audited 1562 packages in 4m

그리고 다시 실행했더니 아래와 같이 기동되었다.

D:\project\todayis\src\main\todayis>npm start

> todayis@0.1.0 start
> react-scripts start

(node:23376) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:23376) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
Starting the development server...
Compiled successfully!

You can now view todayis in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.56.1:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

 

오늘의 티스토리는 여기까지고요.
항상 믿고 봐주셔서 감사합니다.