Axios 호출시, Proxy를 이용하여 크로스브라우징(CORS) 해결하기

> 이슈

타사이트 api에 접근하여 데이터를 받아 프론트에서 활용해야 하는 업무가 있었다.

 

포스트맨으로 호출 했을때는 정상 작동했는데, localhost 또는 우리 웹사이트에서 호출하면 CORS 에러가 발생하였다.

Access to XMLHttpRequest at “타사이트 URL” from origin "localhost:8080” 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.

 

> 원인

브라우저에서는 내가 IP마다 CORS 정책을 허용해주지 않으면 요청이 불가능한데 반해, 포스트맨에서는 잘 통하는 걸 확인할 수 있었다.

포스트맨은 독립적인 HTTP 클라이언트라서 cors 에러가 뜨지 않는다고 한다.

 

서버에서 서버로 보내는 것은 cors 모듈이 담당하지 않는다고 한다.

cors는 프론트서버도 아니고 "브라우저"가 서버로 요청을 보내는 것을 브라우저가 검사하는 것이다.

 

서버에서 서버로 요청을 보내는 것을 검사하려면 req.ip나 req.get('origin') 등을 검사해야 하지만,

물론 이러한 것은 위조가 가능해서 토큰같은 것을 발급한 뒤 서버에서 검사를 하는 식으로 보면 된다. (실제 회사들이 사용하고 있는 방식!)

 

> 해결

✅ 1차 해결 X

전역 헤더에 해당 속성을 추가해주었지만, 프론트 혼자 추가한다고 해결되지는 않았다.

우리 회사 서버였다면 백엔드와 속성값을 허용하여 맞추겠지만, 타깃이 타사이트이므로 해결 불가..

http.defaults.headers["Access-Control-Allow-Origin"] = "*";
http.defaults.withCredentials = true;

 

✅  2차 해결 O

1. http-proxy-middleware 설치

$ npm install http-proxy-middleware --save
$ # or
$ yarn add http-proxy-middleware

2. 아래 내용대로 파일 생성

- front 경로의 src 아래에 setupProxy.js 파일 생성

- 접근하려는 서버 포트에 대해 proxy 정의 (예제는 node 서버가 5000번)

// eslint-disable-next-line @typescript-eslint/no-var-requires
const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = function (app) {
  app.use(
    "/api",
    createProxyMiddleware({
      target: "http://localhost:5000" // 접근하고자 하는 URL
      changeOrigin: true,
    })
  );
};

3. 노드서버를 호출하는 곳에서 axios.get("'http://locathost:5000/api/common" )라고 정의되어있던 부분을

axios.get( "/api/common" )으로 변경

4. 다시 yarn start 시 성공!

 

 

 

[참조 URL]

> 원인

https://velog.io/@stella6767/POSTMAN-CORS%EB%8A%94-%EC%99%9C-%EC%97%90%EB%9F%AC%EA%B0%80-%EC%95%88-%EB%82%A0%EA%B9%8C

https://www.inflearn.com/questions/59645

https://velog.io/@offdutybyblo/%EC%A0%84%EC%A7%80%EC%A0%81-%EB%B9%84%EC%A0%84%EA%B3%B5%EC%9E%90-%EC%8B%9C%EC%A0%90%EC%9D%98-CS-CORS-SOP%EB%A5%BC-%EB%B6%80%EC%85%94%EB%B3%B4%EC%9E%90

 

> 해결

https://lowell-dev.tistory.com/51

https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually