<div id="readability-page-1" class="page"><div><div><a rel="noopener" href="/?source=post_page-----c3dae0b6dd79--------------------------------"><img alt="Dongmin Jang" src="https://miro.medium.com/fit/c/56/56/1*RBfR8MoT_zPwbzfWAGb0gw.jpeg" width="28" height="28"></a></div><figure><div role="button" tabindex="0"><img alt="" src="https://miro.medium.com/max/6048/1*jTksHZ650JOfJZFT2UUpyg.png" width="3024" height="3220" role="presentation"></div></figure>Nextjs 이용해서 프로젝트 새로 구성하면서 local 개발 환경에서 cors 해결하는 부분에 대한 내용입니다.검색해보면 package.json에 설정을 추가 한거나 기타 방법들이 나오는데, 작동하지 않아서 express 를 별도로 띄워서 proxy 해줘야 되나 싶었습니다.but, 위 글을 참고하면 그냥 nextjs 구동하는 환경에 express를 같이 띄울 수 있습니다. 실제 proxy middleware 는 ‘http-proxy-middleware’ 에서 해줍니다.진행 방법은 다음과 같습니다. 프로젝트 최상위 폴더에 아래와 같이 js 파일을 생성합니다. (e.g. server.js)<pre>const express = require('express') const next = require('next') const { createProxyMiddleware } = require("http-proxy-middleware")const port = process.env.PORT || 3000const dev = process.env.NODE_ENV === 'development' const app = next({ dev }) const handle = app.getRequestHandler()const apiPaths = { '/api': { target: 'https://api.medium.com', pathRewrite: { '^/api': '/api' }, changeOrigin: true } }app.prepare().then(() =&gt; { const server = express(); if (dev) { server.use('/api', createProxyMiddleware(apiPaths['/api'])) } server.all('*', (req, res) =&gt; { return handle(req, res) }) server.listen(port, (err) =&gt; { if (err) throw err console.log(`&gt; Ready on <a href="http://localhost:${port}`)" rel="noopener nofollow">http://localhost:${port}`)</a> }) }).catch(err =&gt; { console.log('Error:::::', err) })</pre>그리고 package.json 에 다음과 같이 script를 추가합니다.<pre>"scripts": { "local": "NODE_ENV='development' node server.js", "dev": "next dev", "build": "next build", "start": "next start", "static-build": "next build &amp;&amp; next export" },</pre>터미널에서 <code>npm run local</code> 또는 <code>yarn local</code> 를 실행하면 됩니다.<figure><div><img alt="" src="https://miro.medium.com/max/1332/1*JmbglCQZj69Za6jI5CYbOQ.png" width="666" height="158" sizes="666px" role="presentation" data-old-src="https://miro.medium.com/max/60/1*JmbglCQZj69Za6jI5CYbOQ.png?q=20"></div></figure>이렇게 노출되면 cors 문제 없이 api 서버로 req를 보낼 수 있습니다.</div></div>

Stories by Dongmin Jang on Medium

Next.JS — How To Proxy To Backend Server
Nextjs 이용해서 프로젝트 새로 구성하면서 local 개발 환경에서 cors 해결하는 부분에 대한 내용입니다.
검색해보면 package.json에 설정을 추가 한거나 기타 방법들이 나오는데, 작동하지 않아서 express 를 별도로 띄워서 proxy 해줘야 되나 싶었습니다.
but, 위 글을 참고하면 그냥 nextjs 구동하는 환경에 express를 같이 띄울 수 있습니다. 실제 proxy middleware 는 ‘http-proxy-middleware’ 에서 해줍니다.
진행 방법은 다음과 같습니다.
프로젝트 최상위 폴더에 아래와 같이 js 파일을 생성합니다.
(e.g. server.js)
const express = require('express')
const next = require('next')
const { createProxyMiddleware } = require("http-proxy-middleware")
const port = process.env.PORT || 3000
const dev = process.env.NODE_ENV === 'development'
const app = next({ dev })
const handle = app.getRequestHandler()
const apiPaths = {
  '/api': {
    target: 'https://api.medium.com',
    pathRewrite: {
      '^/api': '/api'
    },
    changeOrigin: true
  }
}
app.prepare().then(() => {
  const server = express();
  if (dev) {
    server.use('/api', createProxyMiddleware(apiPaths['/api']))
  }
  server.all('*', (req, res) => {
    return handle(req, res)
  })
  server.listen(port, (err) => {
    if (err) throw err
    console.log(`> Ready on http://localhost:${port}`)
  })
}).catch(err => {
 console.log('Error:::::', err)
})
그리고 package.json 에 다음과 같이 script를 추가합니다.
"scripts": {
  "local": "NODE_ENV='development' node server.js",
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "static-build": "next build && next export"
},
터미널에서 npm run local 또는 yarn local 를 실행하면 됩니다.
이렇게 노출되면 cors 문제 없이 api 서버로 req를 보낼 수 있습니다.

[React] Let’s solve CORS (in Nextjs)

댓글