브라우저에서 CORS(Cross-Origin Resource Sharing) 제한을 피하는 것은 보안상의 이유로 어렵지만, 몇 가지 일반적인 방법으로 이러한 제한을 우회하거나 해결할 수 있습니다. 다음은 CORS 제한을 피하거나 우회할 수 있는 몇 가지 방법입니다:
![[javascript] CORS 제한을 피하는 방법(Cross-Origin Resource Sharing 우회)](https://blog.kakaocdn.net/dn/bCMJYC/btsH8x9x7H0/2sGhAjqcgehYjZTrAXL661/img.png)
목차
1. 프록시 서버 사용
가장 일반적인 방법은 프록시 서버를 사용하는 것입니다. 프록시 서버는 클라이언트(브라우저)와 대상 서버(외부 리소스) 사이에 위치하여 클라이언트의 요청을 대신 보내고 응답을 받아 클라이언트로 전달합니다. 이를 통해 브라우저의 CORS 제한을 우회할 수 있습니다.
간단한 프록시 서버 설정 (Node.js 사용)
express와 http-proxy-middleware를 사용하여 간단한 프록시 서버를 설정할 수 있습니다.
- 프로젝트 디렉토리 설정:
mkdir cors-proxy cd cors-proxy npm init -y npm install express http-proxy-middleware- 프록시 서버 코드 작성:
const express = require('express'); const { createProxyMiddleware } = require('http-proxy-middleware'); const app = express(); const PORT = 3000; // 프록시 미들웨어 설정 app.use('/proxy', createProxyMiddleware({ target: 'https://api.github.com', // 프록시할 타겟 URL changeOrigin: true, pathRewrite: { '^/proxy': '', // /proxy 경로를 타겟 URL에 맞게 재작성 }, onProxyReq(proxyReq, req, res) { // 헤더 추가 (필요 시) proxyReq.setHeader('User-Agent', 'Mozilla/5.0'); } })); app.listen(PORT, () => { console.log(`Proxy server is running on http://localhost:${PORT}`); }); proxy.js파일을 생성하고 다음 코드를 추가합니다:- 프록시 서버 실행:
node proxy.js- 브라우저 코드에서 프록시 서버 사용:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Proxy Example</title> </head> <body> <h1>Using Proxy to Avoid CORS</h1> <script> async function fetchData() { try { // 프록시 서버를 통해 요청 const response = await fetch('http://localhost:3000/proxy/users/octocat'); if (!response.ok) { throw new Error('Network response was not ok'); } const data = await response.json(); console.log('User Data:', data); } catch (error) { console.error('Fetch error:', error); } } fetchData(); </script> </body> </html> - 브라우저에서
fetch요청을 할 때 프록시 서버를 통해 요청을 보냅니다.
2. CORS-Anywhere 서비스 사용
CORS-Anywhere와 같은 공용 프록시 서버를 사용하여 CORS 제한을 우회할 수 있습니다. 이 서비스는 요청을 프록시하여 서버 간의 CORS 제한을 우회하도록 도와줍니다.
사용 예제:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CORS Anywhere Example</title>
</head>
<body>
<h1>Using CORS Anywhere to Avoid CORS</h1>
<script>
async function fetchData() {
try {
const proxyUrl = 'https://cors-anywhere.herokuapp.com/';
const targetUrl = 'https://api.github.com/users/octocat';
const response = await fetch(proxyUrl + targetUrl);
if (!response.ok) {
throw new Error('Network response was not ok');
}
const data = await response.json();
console.log('User Data:', data);
} catch (error) {
console.error('Fetch error:', error);
}
}
fetchData();
</script>
</body>
</html>3. 서버 측에서 CORS 허용
대상 서버에서 CORS를 허용하도록 설정할 수 있는 경우, 서버에 적절한 CORS 헤더를 추가하도록 요청할 수 있습니다. 서버에서 Access-Control-Allow-Origin 헤더를 추가하면 브라우저가 요청을 허용할 수 있습니다.
4. JSONP 사용
JSONP(JSON with Padding)는 전통적인 AJAX 요청이 아닌 <script> 태그를 통해 데이터를 가져오는 방법으로, CORS 제한을 우회할 수 있습니다. 이는 주로 GET 요청에만 사용됩니다. 하지만, JSONP는 보안 문제가 있을 수 있고, 최신 웹 개발에서는 잘 사용되지 않습니다.
요약
- 프록시 서버 사용: Node.js와 같은 서버 측 환경에서 프록시 서버를 설정하여 CORS 제한을 우회할 수 있습니다.
- CORS-Anywhere: 공용 프록시 서비스를 사용하여 CORS 제한을 우회할 수 있습니다.
- 서버 측에서 CORS 허용: 대상 서버가 CORS를 허용하도록 구성할 수 있습니다.
- JSONP 사용: 제한된 상황에서 JSONP를 사용하여 데이터를 가져올 수 있습니다.
위 방법들을 사용하면 CORS 제한을 피하고 원하는 웹 리소스를 수집할 수 있습니다.
'IT 개발' 카테고리의 다른 글
| [JavaScript] 자바스크립트 replaceAll 사용 방법(js 에서 replaceAll) (0) | 2024.07.03 |
|---|---|
| CORS(Cross-Origin Resource Sharing)의 아주 쉬운 설명 (0) | 2024.06.22 |
| [jquery] 특정 태그를 다른 태그로 바꿔주는 스크립트 (0) | 2024.06.11 |
| 포털 사이트에 내 사이트 노출시키기(다음, 네이버, 구글, 야후) (3) | 2024.06.07 |
| 맥북에서 무결성 보호(SIP) 해제 방법 (0) | 2024.04.28 |
댓글