리액트 회고록 6. CORS 해제하기 - 2

양희준·2022년 7월 18일
0

http-proxy-middleware란?

  • proxy 설정을 쉽게 하게해주는 라이브러리이다.
  • 수동으로 proxy 설정을 쉽게 도와준다.
  • 여러개의 주소로 cors 우회를 할 수 있게 도와준다.

http-proxy-middleware

react 폴더 안에서 npm을 이용해서 라이브러리 설치하기

// clinet
npm install http-proxy-middleware

react 폴더 안의 src/setupProxy.js를 생성하기.

// src/setupProxy.js 설정하기
const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    // origin 다음의 첫 번째 path를 넣어준다.
    '/user',
    createProxyMiddleware({
      // origin의 주소와 changeOrigin을 설정값을 ture로 넣어준다.
      target: 'http://localhost:4000',
      changeOrigin: true,
    })
  )
};

package.json의 proxy와 다른점은 origin을 넣지 않고 해당 path 주소만 넣어준다.

import React from "react";

function App() {
    const handleOnClick = () => {
      // 해당 타겟의 path을 넣어준다.
        fetch("/user")
        .then((res) => res.json())
        .then((res) => console.log(res))
        .catch((err) => console.log(err));
    }
    return (
        <div>
            <button onClick={handleOnClick}>버튼</button>
        </div>
    );
}

export default App;
// server
const express = require("express");
const logger = require("morgan");
const app = express();
const PORT = 4000;

const data = {
    user: "YHJ",
    age: 27
}

// 미들 웨어
app.use(logger("tiny"));
app.use(express.json());

app.get("/", (req, res) => res.send("hello!!"));
app.get("/user", (req, res) => res.json(data));

app.listen(PORT, () => console.log(`http://localehost:${PORT}`));

console을 확인하면 데이터를 확인할 수 있다.

다양한 주소의 해제방법

src/setupProxy.js에 2가지의 origin을 설정해주기

// src/setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/user',
    createProxyMiddleware({
      target: 'http://localhost:4000',
      changeOrigin: true,
    })
  ),
  app.use(
    '/1360000',
    createProxyMiddleware({
        // 기상청 API
        target: 'http://apis.data.go.kr',
        changeOrigin: true,
    })
  )
};

동시에 2가지 API가 cors가 해제가 되는지 확인하기

import React from "react";

function App() {
    // .env 환경변수에 API 저장 
    const WEATHER_API = process.env.REACT_APP_WEATHERAPI;
    // 2가지 다른 주소의 API 호출
    const handleOnClick = () => {
        fetch("/user")
        .then((res) => res.json())
        .then((res) => console.log(res))
        .catch((err) => console.log(err));

        fetch(WEATHER_API)
        .then((res) => res.json())
        .then((res) => console.log(res))
        .catch((err) => console.log(err));
    }
    return (
        <div>
            <button onClick={handleOnClick}>버튼</button>
        </div>
    );
}

export default App;

console을 확인하면 2가지의 데이터가 들어온 것을 확인할 수 있다.

profile
JS 코린이

1개의 댓글

comment-user-thumbnail
2022년 7월 19일

리액트 많이 어려웠는데 도움이 많이 되네요~~^^

답글 달기