반응형
cors 패키지 설치하기
- 터미널에서 아래의 명령어 입력
npm install cors
# npm i cors
- 설치 확인
cors 개념
- 교차 출처 리소스 공유(Cross-origin resource sharing)
- 웹 페이지 상의 제한된 리소스를 다른 도메인으로부터 요청할 수 있게 허용하는 것
- 추가 HTTP 헤더를 사용하여 다른 출처에서 접근 권한을 부여해주는 것
- 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청 실행
- 보안 상의 이유로, 브라우저는 스크립트에서 시작한 교차 출처 HTTP 요청을 제한함
사용 방법
var express = require('express')
var cors = require('cors')
var app = express()
app.use(cors())- cors 패키지의 사용 예제에서도 express 패키지를 사용하기 때문에 해당 포스팅에서도 express를 사용하여 설명함
- var cors = require('cors') : cors 객체 생성
- app.use(cors()) : express의 인스턴스인 app에 cors 사용
응용 예시 - DB의 회원 정보를 출력하는 API
express를 사용한 웹 서버와 mssql 이용
- mssql_db_connector.js
- 기본경로/users 요청시 : mssql의 테이블(testTable) 모든 정보 출력
- 기본경로/users?쿼리스트링 요청시 : 전달하는 유저의 이름의 정보 출력
const express = require('express');
const sql = require('mssql');
const cors = require('cors');
const app = express();
// use cors
app.use(cors());
// Create a SQL Server connection pool
const pool = new sql.ConnectionPool({
user: 'sa',
password: '1234',
server: '192.168.~~.~~',
database: 'EunbyeolLocalTestDB',
options: {
encrypt : false, // IP address access
trustServerCertificate: true // Trust self-signed certificate
},
});
// Connect to the database
pool.connect((err) => {
if (err) {
console.error('Error connecting to database:', err);
return;
}
console.log('Connected to database!');
});
// Set up an endpoint to query the database
app.get('/users', (req, res) => {
let sqlQuery = "SELECT * FROM testTable";
const { name } = req.query;
if (name != null) { sqlQuery += " where username='" + name + "'"; }
console.log(sqlQuery);
pool.request().query(sqlQuery, (err, result) => {
if (err) {
console.error('Error executing query:', err);
res.status(500).send('Error executing query');
return;
}
res.json(result.recordset);
});
});
// Start the Express server
app.listen(3000, () => {
console.log('Express server listening on port 3000');
});웹 페이지를 보여줄 html 파일
- index.html
- 실행 절차
- 텍스트 필드의 DB의 존재하는 사용자의 이름 입력
- 버튼 클릭시 텍스트 필드에 있는 값을 fetch를 통해 쿼리 스트링 파라미터로 전달
- fetch : Web API의 Fetch API, 요청과 응답 등의 요소를 자바스크립트에서 접근하고 조작할 수 있게 하는 API
- express의 라우팅 메소드 요청
- 라우팅 메소드 : 위의 'mssql_db_connector.js' 파일에서 구축되어 있는 express 서버의 app.get 부분
- 응답에 성공하면 결과 반환
- 반환된 결과를 JSON.stringify를 통해 JSON 문자열로 변환하여 HTML div에 내용 출력
- JSON.stringify : 자바스크립트 객체나 값을 JSON 문자열로 변환하는 자바스크립트 메서드
- 꼭 확인하기!!!
- Fetch API 사용시, 매개 변수를 사용하려면 작은 따옴표(')가 아닌 키보드 esc 아래에 있는 (`)를 사용하여야 함
- 매개변수는 '${변수이름}'의 형식을 따름
- 예시)
- fetch('http:localhost:3000/users?name=${name}') > 작은 따옴표 사용 X
- fetch(`http:localhost:3000/users?name=${name}`) > ESC 밑의 `키 사용 O
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function apiTest() {
const name = document.getElementById('name').value
//fetch('http://localhost:3000/users')
fetch(`http://localhost:3000/users?name=${name}`)
.then((response) => response.json())
.then((data) => {
console.log(data),
document.getElementById('resultDiv').innerHTML = JSON.stringify(data[0].username)
//document.getElementById('resultDiv').innerHTML = JSON.stringify(data)
});
}
</script>
</head>
<body>
<input id="name" type="text">
<button onclick="apiTest()">API 회원 정보 요청</button>
<div id="resultDiv"></div>
</body>
</html>HTML 문서로 GET 요청 보내기
- index.html 실행 화면
cors 사용 유무에 따른 결과 확인 - 'app.use(cors())'를 사용하지 않은 경우
- 에러 출력, 기본적으로 브라우저에서는 cors 기능을 제한하기 때문
cors 사용 유무에 따른 결과 확인 - 'app.use(cors())'를 사용한 경우
- 특정 회원의 이름으로 검색하여 유저의 이름 출력해보기
- 테이블의 모든 정보 출력해보기
- 위의 index.html 파일의 소스 코드에서 fetch 부분을 수정해주면 됨
- 모든 정보 출력(select * from testTable)은 mssql_db_connector.js 파일에서 이미 정의가 되어있는 상태임
// mssql_db_connector.js 파일에서 정의된 경로 호출
fetch('http://localhost:3000/users')
.then((response) => response.json())
.then((data) => {
console.log(data),
// 전달 받은 모든 데이터를 JSON 형식으로 출력
document.getElementById('resultDiv').innerHTML = JSON.stringify(data)
});
- 정상 출력 확인, 테이블의 모든 정보 출력
참고
- npmjs.com - cors
- 위키백과 - 교차 출처 리소스 공유
- mozilla.org - 교차 출처 리소스 공유(CORS)
- mozilla.org - Fetch 사용하기
- 조코딩님 유튜브 - 한시간만에 Node.js 백엔드 기초 끝내기 (ft. API 구축)
- mssql을 연동한 express 사용하기
- express 라우팅 메서드 정의하기
- npm 사용 방법
반응형