[CORS 오류] 도메인 간 요청 문제: 다양한 환경의 CORS 솔루션

2024-07-12

여기에 이미지 설명을 삽입하세요.

🔥 个人主页：빈 시

여기에 이미지 설명을 삽입하세요.

기사 디렉토리

여기에 이미지 설명을 삽입하세요.

도메인 간 리소스 공유 (CORS, Cross-Origin Resource Sharing) 문제는 프런트엔드 개발에서 흔히 발생하는 문제입니다. 이 기사에서는 다양한 환경(예: Vue3 + Vite 프로젝트, jQuery 프로젝트 및 기타 환경)의 솔루션을 자세히 소개합니다.

1. CORS 오류의 일반적인 원인

크로스 도메인 문제의 본질은 브라우저가 보안상의 이유로 한 소스(도메인, 프로토콜, 포트)에서 다른 소스로 리소스 로드를 제한한다는 것입니다. 이 보안 메커니즘을 "동일 출처 정책"이라고 합니다. 동일 출처 정책은 요청된 URL이 현재 웹페이지의 URL과 동일한 프로토콜, 도메인 이름, 포트를 갖는 경우에만 브라우저가 요청 통과를 허용하도록 규정합니다.

CORS 헤더 부족：
서버가 올바른 CORS 응답 헤더를 설정하지 않아 브라우저가 요청을 거부했습니다.예를 들어, 브라우저는 서버 응답에 다음이 포함될 것으로 예상합니다.Access-Control-Allow-Origin 헤더가 설정되지 않은 경우 브라우저는 요청을 차단합니다.
교차 출처 요청은 금지됩니다.：
기본적으로 브라우저는 사용자를 보호하기 위해 교차 출처 요청을 차단합니다. 서버가 특정 도메인에 대한 액세스를 허용하지 않으면 브라우저에서 CORS 오류가 발생합니다.
실행 전 요청이 실패했습니다.：
일부 복잡한 요청의 경우 브라우저는 실행 전 요청(OPTIONS 요청)을 보내 서버가 요청을 허용하는지 확인합니다. 실행 전 요청이 실패하면 CORS 오류가 발생합니다.

2. 솔루션

1. 뷰3 + Vite 프로젝트의 솔루션

Vite의 개발 서버 프록시 기능을 통해 로컬 요청을 다른 서버로 프록시하여 도메인 간 문제를 피할 수 있습니다. 구체적인 단계는 다음과 같습니다.

Vue3 + Vite 프로젝트 생성

npm create vite@latest
cd your-project-name
npm install
1
2
3

Vue3 템플릿을 선택하고 프로젝트 디렉터리를 입력하세요.

Vite의 프록시 구성

Vite 프로젝트의 루트 디렉토리에 있음vite.config.ts(또는vite.config.js), 다음과 같이 구성합니다.

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

export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/api': {
        target: 'http://api.example.com', // 目标服务器
        changeOrigin: true, // 是否改变请求源
        rewrite: (path) => path.replace(/^/api/, ''), // 重写路径
      },
    },
  },
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

요청 보내기

Vue 구성 요소에서는 다음을 전달할 수 있습니다.axios또는fetch 요청을 보냅니다. 예를 들어:

<template>
  <div>
    <button @click="fetchData">获取数据</button>
    <div v-if="data">{{ data }}</div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import axios from 'axios';

export default defineComponent({
  setup() {
    const data = ref(null);

    const fetchData = async () => {
      try {
        const response = await axios.get('/api/data');
        data.value = response.data;
      } catch (error) {
        console.error('请求错误:', error);
      }
    };

    return {
      data,
      fetchData,
    };
  },
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

2. jQuery 프로젝트의 솔루션

jQuery 프로젝트에서는 요청 헤더를 설정하거나 JSONP를 사용하여 CORS 문제를 해결할 수 있습니다.

CORS 요청 헤더 사용

서버에 다음과 같은 올바른 CORS 헤더가 설정되어 있는지 확인하세요. Access-Control-Allow-Origin . 클라이언트가 요청을 시작할 때:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $.ajax({
    url: 'http://api.example.com/data',
    method: 'GET',
    success: function(data) {
      console.log(data);
    },
    error: function(xhr, status, error) {
      console.error('请求错误:', error);
    }
  });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

JSONP 사용

서버가 JSONP를 지원하는 경우 다음과 같은 방법으로 도메인 간 문제를 해결할 수 있습니다.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $.ajax({
    url: 'http://api.example.com/data',
    method: 'GET',
    dataType: 'jsonp', // 使用JSONP
    success: function(data) {
      console.log(data);
    },
    error: function(xhr, status, error) {
      console.error('请求错误:', error);
    }
  });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

3. 다른 환경의 솔루션

서버측 프록시 사용

대부분의 경우 서버 측을 통해 도메인 간 요청을 전달하기 위해 서버 측에 프록시를 설정할 수 있습니다.예를 들어 Node.js에서는 다음을 사용할 수 있습니다.http-proxy-middleware：

const { createProxyMiddleware } = require('http-proxy-middleware');

app.use('/api', createProxyMiddleware({
  target: 'http://api.example.com',
  changeOrigin: true,
  pathRewrite: {
    '^/api': '',
  },
}));
1
2
3
4
5
6
7
8
9

CORS 헤더 설정

서버 응답에 올바른 CORS 헤더가 포함되어 있는지 확인하세요. 예를 들어 Node.js + Express에서는 다음과 같습니다.

const express = require('express');
const app = express();

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});

app.get('/data', (req, res) => {
  res.json({ message: 'Hello World' });
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Nginx를 사용하여 프록시 구성

Nginx에서는 프록시를 구성하여 CORS 문제를 해결할 수 있습니다.

server {
    listen 80;
    server_name yourdomain.com;

    location /api/ {
        proxy_pass http://api.example.com/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12

3. 요약

CORS 문제는프론트엔드 개발 일반적인 문제이지만 적절한 프록시 구성 및 서버 설정을 통해 효과적으로 해결할 수 있습니다. 다양한 환경에서는 Vite의 프록시 기능을 사용하고 요청 헤더, JSONP, 서버 측 프록시, Nginx 프록시 및 기타 방법을 설정하여 도메인 간 문제를 해결할 수 있습니다. 이 글이 CORS 문제를 이해하고 해결하는 데 도움이 되기를 바랍니다.

기술나눔