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가지의 데이터가 들어온 것을 확인할 수 있다.
리액트 많이 어려웠는데 도움이 많이 되네요~~^^