CORS 문제 처리: 전체 가이드

 

CORS(Cross-Origin Resource Sharing)는 웹 애플리케이션이 웹 페이지를 제공한 도메인이 아닌 다른 도메인에서 리소스를 요청할 수 있도록 하는 메커니즘입니다. 이는 최신 웹 애플리케이션에 필수적인 기능이지만, 특히 보안 정책으로 인해 요청이 차단되는 경우 복잡해질 수도 있습니다. 이 가이드에서는 CORS가 무엇인지, 왜 중요한지, 일반적인 문제, 프런트엔드 개발에서 CORS 처리에 대한 모범 사례를 다룹니다.
 

CORS란 무엇입니까?

 

CORS는 악성 웹사이트가 허가 없이 다른 도메인의 리소스에 액세스하는 것을 방지하기 위해 브라우저에서 구현하는 보안 기능입니다. HTTP 헤더를 사용하여 한 원본(도메인)의 요청이 다른 원본의 리소스에 액세스하도록 허용되는지 여부를 결정합니다.
기본적으로 한 도메인은 악성 프로그램, 바이러스 등으로부터 앱과 모든 것을 방지하기 위해 다른 도메인의 데이터에 액세스할 수 없습니다. 이 경우 서버는 CORS를 사용하여 구성된 허용 도메인의 세부 정보를 알고 있어야 합니다.
 

주요 CORS 헤더

 

1. Access-Control-Allow-Origin: 리소스에 액세스할 수 있는 원본을 지정합니다.
    

2. Access-Control-Allow-Methods: 허용되는 HTTP 메서드(GET, POST 등)를 지정합니다.
    

3. Access-Control-Allow-Headers: 실제 요청 중에 사용할 수 있는 HTTP 헤더를 지정합니다.
    

4. Access-Control-Allow-Credentials: 자격 증명 플래그가 true일 때 요청에 대한 응답이 노출될 수 있는지 여부를 나타냅니다.
    

5. Access-Control-Expose-Headers: 응답의 일부로 노출될 수 있는 헤더를 지정합니다.
    

6. Access-Control-Max-Age: 실행 전 요청 결과를 캐시할 수 있는 기간을 나타냅니다.
    

CORS가 중요한 이유

 

CORS는 민감한 정보에 대한 무단 액세스를 방지하여 보안에 매우 중요합니다. 그러나 엄격한 CORS 정책은 합법적인 API 요청을 방해하여 웹 애플리케이션에 기능 문제를 일으킬 수도 있습니다. CORS를 이해하고 적절하게 구성하는 것은 보안과 기능을 모두 보장하는 데 필수적입니다.
 

일반적인 CORS 문제

 

1. CORS 정책에 의해 차단됨: 서버에 적절한 CORS 헤더가 포함되어 있지 않을 때 발생합니다.
    

2. 실행 전 요청 실패: 실행 전 요청(OPTIONS)이 이루어지고 서버가 올바르게 응답하지 않는 경우.
    

3. 인증 요청: 쿠키 또는 인증 헤더가 포함된 경우 서버는 명시적으로 자격 증명을 허용해야 합니다.
    

CORS 처리 모범 사례

 

이 글에서는 Express 미들웨어로 쉽게 전달될 수 있고 React에서도 사용할 수 있는 cors npm 라이브러리를 사용하겠습니다
우선, 다음 명령을 실행하여 cors를 설치하세요

npm 설치 코드

1. 서버측 구성  

CORS 문제를 처리하는 가장 효과적인 방법은 원본 간 요청을 허용하도록 서버를 구성하는 것입니다. 가장 최적의 방법은 프런트엔드(React.js)가 백엔드와 원활하게 통신할 수 있도록 서버 측에서 CORS를 구성하는 것입니다. 여기에는 여러 속성 설정이 포함됩니다
 

예: Express가 포함된 Node.js
 

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

const corsOptions = {
  origin: 'http://example.com', // specify the allowed origin
  methods: 'GET,POST,PUT,DELETE', // allowed methods
  allowedHeaders: 'Content-Type,Authorization', // allowed headers
  credentials: true, // allow credentials
};

app.use(cors(corsOptions));

app.get('/api/data', (req, res) => {
  res.json({ message: 'This is CORS-enabled for only example.com.' });
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

메서드에 *를 사용할 수 있으며, allowedHeaders를 사용하면 모든 메서드나 헤더를 허용할 수 있습니다

원본 속성:

// specify the allowed origin (single domain),
origin: 'http://example.com',

// configure cors to set the origin to the request origin 
origin:true 

// set multiple domains
origin:["http://example.com","https://demo.com"] 

1. 프런트엔드에서 CORS 처리  

서버를 제어하지 않거나 개발 중에 빠른 해결이 필요한 경우 CORS 문제를 프런트엔드에서 처리할 수 있습니다.
 

예: React에서 프록시 사용
 

React를 사용할 때 package.json에 프록시를 설정하여 API 요청을 백엔드 서버로 리디렉션하고 CORS 문제를 우회할 수 있습니다.
 

{
  "name": "your-app",
  "version": "1.0.0",
  "proxy": "http://localhost:5000"
}

 

결론

 

CORS 문제를 처리하는 것은 개발의 중요한 부분입니다. CORS 메커니즘을 이해하고 이 가이드에 설명된 모범 사례를 구현함으로써 웹 애플리케이션이 다양한 도메인에서 올바르게 작동하면서 안전하게 유지되도록 할 수 있습니다. 서버를 구성하든, 프록시를 설정하든, 타사 서비스를 사용하든 이러한 전략은 CORS를 효과적으로 관리하는 데 도움이 됩니다.
빠른 수정은 개발 및 테스트에 유용할 수 있지만, 적절한 서버 측 구성은 프로덕션 환경에서 CORS를 처리하는 가장 안정적인 방법입니다.
 

Dualite에 대해 자세히 알아보고 사용을 시작하려면 공식 웹사이트를 방문하세요

위 내용은 CORS 문제 처리: 전체 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!