https Rest api 를 js로 통신하려면 proxy를 통해 cors 문제를 해결

저번 주 https 사이트로부터 rest api 불러와야 했다. 하지만 이전에는 rest api를 사용할 때 문제가 없었는데 https에서는 처음 불러와서 그런지 계속 cors 경고가 계속되어 하루 정도 계속 찾아봤다.

아래와 같은 경고가 떴다.

has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

찾아본 결과 중간에 https의 경우
같은 출처로 부르는지 확인을 한다고 했다.

서버에서 아래와 같이 한 경우에도 문제가 생기는 것 같다.
Access-Control-Allow-Origin: *

그래서 프록시가 필요하다.

그래서 http-proxy-middleware 를 사용해야 했는데 설명을 봐도 이 부분을 다른 문서에 불러와 사용해야 하는지 어느 부분에 붙여서 사용해야 하는지 몰라 삽질을 하다 결국 내가 fetch, axios를 사용할 위 부분에 적어 놓으면 된다는 것을 알았다.

물론 npm 을 통해 설치해야 하기 때문에
1. npm i -y 를 통해 npm init 만들기
2. http-proxy-middleware 을 설치
3. express 설치

한 후 아래에서 axios 호출하니 정상적으로 데이터들이 에러 없이 들어왔다... 하루만 빨리 알게 되었다면 좋았을 텐데... 많이 아쉽다...

import express from 'express';
import { createProxyMiddleware } from 'http-proxy-middleware';
import axios from 'axios';


// proxy 만들기
const app = express();

const PORT = 3000;
const HOST = 'localhost';
const API_SERVICE_URL = BASE_URL;

app.use(
  '/',
  createProxyMiddleware({
    target: API_SERVICE_URL,
    changeOrigin: true,
  })
);
// ================

참고 cors