#20 CORS 이슈, Proxy 설정

//client 폴더로 이동후에
npm install http-proxy-middleware --sasve
로 설치.

//cleint/src에서 
setupProxy.js생성

// src/setupProxy.js

const proxy = require('http-proxy-middleware');
module.exports = function(app){
    app.use(
        '/api',
        proxy({
            target: 'http://localhost:3001',
            changeOrigin:true,
        })
    )
}

 

이런오류가 뜬다 그래서 홈페이지에 접속해서 보니 버전업으로 인해 바뀐듯하다.

https://create-react-app.dev/docs/proxying-api-requests-in-development/

Proxying API Requests in Development | Create React App

 

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

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
    })
  );

client에서 npm run start하면

 

app.get('/api/hello', (req, res) => {
  res.send("heelo");
});

서버에서 보낸 heelo가 나오는걸 볼 수 있다.