파이널 프로젝트 중, 이니렌탈 API를 연습해보는데 CORS policy 에러가 발생했다.
Access to XMLHttpRequest at
'요청 보낸 URL'from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
클라이언트 단에서 해결할 수 있는 방법은 proxy를 설정해서 요청 보내는 방법이 있다고 하여 찾아보았다.
Proxy 설정 방법
package.json
package.json 파일에 proxy 설정을 넣어준다.
{
...
"proxy": "https://iniapi.inicis.com"
}이니렌탈에서 취소와 배송처리 API를 둘 다 사용해야해서 다중 proxy가 필요했다.
{
...
"proxy": {
"/api": {
"target": "https://iniapi.inicis.com"
},
"/apis": {
"target": "https://inirt.inicis.com"
}
}
}이런 식으로 작성하고 fetch/axios 등 요청을 보낼 때 https://inirt.inicis.com/apis 이후의 url을 붙여서 보내면 된다.
하지만 이렇게 작성하였더니
When specified, "proxy" in package.json must be a string.
Instead, the type of "proxy" was "object".
Either remove "proxy" from package.json, or make it a string.
객체로 작성하면 안된단다 ...
CRA로 생성한 React 프로젝트는 다른 방법으로 다중 proxy를 설정해야한다고 해서 찾아보았다.
http-proxy-middleware
-
설치
npm install --save http-proxy-middleware -
setupProxy.js
const { createProxyMiddleware } = require("http-proxy-middleware");
module.exports = (app) => {
app.use(
createProxyMiddleware("/api/v1/refund", {
target: "https://iniapi.inicis.com",
changeOrigin: true,
}),
);
app.use(
createProxyMiddleware("/apis/v1/rental/modify", {
target: "https://inirt.inicis.com",
changeOrigin: true,
}),
);
};
이렇게 파일을 작성해주고 target 뒤 쪽의 url로 요청을 보내면 된다.
