WEB 만들기 21 - CORS 이슈, Proxy 설정

저번 시간에 데이터를 전송했는데 오류가 생겼습니다. 그 이유는 

 

일단 포트가 다르고 어떤 설정을 안 하면 cors 정책에 의해서 막혀버린다. 

 

cors란 

Cross-Origin Resource Sharing  의 약자로 보안을 위해서 사용된다. 

여러가지 방법이 있다.

 개발자 도구를 이용하는 방법 

 

그리고 프론트 엔드 부분만 고칠 수 있는 상황이면 jsonp 방식을 이용하여 

모듈 request를 get request로 바꿔서 보냄으로 인해서 해결할 수 있는 방법이 있습니다. 

그것도 제한적이기 때문에 

 

우리가 백엔드 , 프론트 다 컨트롤 할 수 있으면 서로 오는것은 받거나 허용 할수 있게 전달해서 보내면 가능하고

 proxy라는 방법이 있습니다. 

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

Proxying API Requests in Development | Create React App

이곧에서 내용 참고 

이곧을 사용할 예정입니다. 

여기서 일단 다운을 해주어야 합니다. 

우선 client 부분으로 가서

npm install http-proxy-middleware --save

해주고

여기 설명 처럼 폴더를 생성하고 안에 저렇게 js 파일만들어주세요. 

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

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

이내용을 넣어주시고 다시 서버들을 켜서 확인 해봅시다. 

이렇게 보냈기 때문에 

윈도우 창에 

콘솔창에 전송된것이 확인이 됩니다. 

 

이방법 말고 여러가지 방법이 있습니다. 

또는,

 

이런방식으로도 가능하다고 합니다. 무튼 다음시간에 ..