[ CORS / React ] CORS 원리 보다는 해결 방식<local 환경> (Feat. vite)

현재 컨퍼런스 페이지를 만들고 있다. 토이 프로젝트로.

결제를 위해서 데이터를 받아와야하는데, 데이터가 들어오지 않고 있다. 이유는 CORS.

 

환경은 물론 Local이다.

이걸 해결하기 위해서 첫번째로  ngrok을 사용했다.이렇게 해서 얻은 URL을 넘겨서 server에서 내 주소를 허용하게 해놨는데도 문제가 생겼다.

---

로컬 환경이 아니고  서버에서 도메인을 허용해줘도 안 될때,

React with Typescript

const submitData = {
  method: "POST",

   cache: "no-cache" as RequestCache,

   credentials: "same-origin" as RequestCredentials,

   headers: {

     "Content-Type":"application/json",

   },

   body : JSON.stringify({

      name: cleanedData?.user,

      email: cleanedData?.email,

      phone:cleanedData?.phone,

      job : selectPosition.eng

   })

}

 

---

 

이슈

- 로컬환경에서 결제 테스트를 진행 해보기

=> CORS 에러 발생(이유 : 내 컴에서 다른 서버로 데이터 요청을 해서)

 

문제 해결

사전 준비 : Local은 URL 값이 없어서, URL 값을 임의로 만들기 위해서 Ngrok이라는 프로그램 설치(npm)하여 진행.

로컬 개발 환경에서 인터넷을 통해 웹 애플리케이션으로 안전하게 접근할 수 있도록 해주는 것.
약간 임의 배포 같은 느낌.

 

방법들

1. Server 에서 내 주소 허용해주기. => 이미 넣었는데 안 됨...

2.프록시 진행

여러 가지 방법을 찾던 중 프록시를 하라고 해서 진행해볼 예정이다.

Create-react-app에서도 제안하는 방법중 하나이다.

https://create-react-app.dev/docs/proxying-api-requests-in-development/

 

 

설치하기

1. 인스톨

npm install http-proxy-middleware --save-dev

 

2. vite.config.ts 설정

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': {
        target: 'http://your-api-server.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')  // rewrite 할 때는 제거
      }
    }
  }
})

작성시 주의사항

 

• /api는 프록시할 경로 접두사입니다.
• target은 실제 API 서버의 URL입니다.
• changeOrigin: true는 호스트 헤더를 대상 URL로 변경합니다.
• rewrite는 경로에서 /api 접두사를 제거합니다.

 

3.  /api 접두사 사용 :  React 애플리케이션에서 API 요청을 할 때

예시

fetch('/api/some-endpoint') // 여기 주의해서 잘 넣어주시기 바랍니다!
  .then(response => response.json())
  .then(data => console.log(data));

4.더 빽센 환경으로 완벽하게?

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react';
import { createProxyMiddleware } from 'http-proxy-middleware'


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    {
      name: 'configure-server',
      configureServer(server) {
        server.middlewares.use(
          '/api',
          createProxyMiddleware({
            target: 'https://puddingcamp.com/',
            changeOrigin: true,
            pathRewrite: {
              '^/api': '',
            },
          })
        )
      },
    },
  ],
  server: {
    proxy: {
      '/api': {
        target: 'https://puddingcamp.com/',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

 

 

 

결과

200. 통신 성공

 

 

참조 자료

claude

https://www.datoybi.com/http-proxy-middleware/

https://peripheral-nerv.tistory.com/entry/vite-%EC%97%90%EC%84%9C-env-%EC%84%A4%EC%A0%95%ED%95%B4%EC%84%9C-proxy-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-CRA%EC%97%90%EC%84%9C-proxy-%EC%84%A4%EC%A0%95

[React] 클라이언트에서 CORS 해결하기(http-proxy-middleware)

 

vite 에서 env 설정해서 proxy 사용하기 (+CRA에서 proxy 설정)