CORS 오류 해결방법

CORS 란?

Cross Origin Resource Sharing

브라우저가 웹 애플리케이션에 선택된 접근 권한을 부여하는 메커니즘이다.

서로 다른 출처의 리소스를 요청하는 경우, 보안 문제로 이를 차단한다.

---

해결방법

 

1. 동일한 출처 사용하기

같은 주소 내에서 데이터를 주고 받는 경우, 오류가 발생하지 않는다.

 

2. 서버

HTTP 응답 헤더에서 설정을 변경할 수 있다.

express 모듈을 사용하는 경우,

const express = require("express");
const cors = require("cors");
const app = express();

app.use(
    cors({
        origin: "[주소]",
        methods: "GET,HEAD,PUT,PATCH,POST,DELETE",
        credentials: true,
    })
);

 

3. 클라이언트

리소스를 요청하는 서버 사이테 프록시 서버를 만들어 사용하는 방법이 있다.

• 프록시 서버 : 브라우저와 서버를 통신하는 과정 중간에서 정보 교환을 도와주는 중간 서버를 말한다.

Vite + ts

vite.config.ts 파일에 proxy 내용 추가하기 (client -> server 방향!!)

export default defineConfig({
  plugins: [react()],
  server:{
    proxy: {
      "[경로]": {
        target: "[주소]",
        changeOrigin: true,
        secure: false,
        ws: true,
      }
    }
  }
}

Configuring Vite | Vite

Configuring Vite | Vite

 

 

CRA

[Typescript] CRA에서 http-proxy-middleware 사용법

[Typescript] CRA에서 http-proxy-middleware 사용법

 

---

참고자료

CORS 와 해결방법 (express, proxy) - 네트워크 study2

CORS 와 해결방법 (express, proxy) - 네트워크 study2