문제상황:
웹 서비스 개발 중, 클라이언트에서 다른 도메인의 API를 호출하는 코드를 작성했습니다. 이때, CORS(Cross-Origin Resource Sharing) 관련 에러가 발생했습니다.
에러가 발생한 코드:
fetch('https://api.example.com/data')
.then((response) => response.json())
.then((data) => console.log(data))
.catch((error) => console.error('Error:', error));에러로그 내용:
Access to fetch at 'https://api.example.com/data' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.해결방법:
서버에서 응답 헤더에 Access-Control-Allow-Origin를 추가하여 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(3001, () => console.log('Server listening on port 3001'));원인분석:
CORS 에러는 웹 브라우저가 다른 도메인의 리소스를 요청할 때 발생하는 보안 문제입니다. 이 에러는 브라우저가 자바스크립트 코드에서 다른 도메인의 리소스를 요청할 때 발생합니다.
- 브라우저는 요청을 보낼 때 사전 요청(Preflight Request)를 전송합니다. 이 요청은 실제 데이터를 전송하기 전에 서버가 해당 요청을 받아들일 수 있는지 확인하는 역할을 합니다.
- 서버는 사전 요청에 대한 응답을 전송하고, 이 응답에 CORS 정책을 설정합니다.
- 브라우저는 서버로부터 받은 응답을 확인하고, CORS 정책에 따라 요청을 허용할지 결정합니다.
위 예제에서는 서버 측 코드가 수정되어 Access-Control-Allow-Origin 헤더가 추가되었습니다. 이로 인해 브라우저는 CORS 정책에 따라 요청을 허용하게 됩니다.
참고링크:
728x90
