CORS(Cross-Origin Resource Sharing)는 한 도메인의 웹 애플리케이션이 다른 도메인의 리소스에 액세스할 수 있도록 하는 메커니즘입니다. 이는 프런트엔드와 백엔드가 분리되어 있고 API를 통해 통신하는 애플리케이션을 개발할 때 매우 중요합니다.
다음은 외부 라이브러리를 사용하지 않고 Node.js 및 Express에서 CORS 구현을 설명하는 기사입니다.
"use strict";
/*jshint node:true */
var simpleMethods, simpleRequestHeaders, simpleResponseHeaders, toLowerCase, checkOriginMatch, origin;
Object.defineProperty(exports, "simpleMethods", {
get: function () {
return [
"GET",
"HEAD",
"POST",
"PUT",
"DELETE"
];
}
});
simpleMethods = exports.simpleMethods;
Object.defineProperty(exports, "origin", {
get: function () {
return ["http://localhost:3000"];
}
});
origin = exports.origin;
단순 메서드 내보내기: CORS 요청(예: GET, POST, PUT 등)에 허용되는 HTTP 메서드를 정의합니다.
출처 내보내기: 액세스가 허용된 출처 목록을 지정합니다. 이 예에서는 http://localhost:3000이 허용됩니다.
Object.defineProperty(exports, "simpleRequestHeaders", {
get: function () {
return ["accept", "accept-language", "content-language", "content-type", "authorization", "token"];
}
});
simpleRequestHeaders = exports.simpleRequestHeaders;
Object.defineProperty(exports, "simpleResponseHeaders", {
get: function () {
return ["cache-control", "content-language", "content-type", "expires", "last-modified", "pragma"];
}
});
simpleResponseHeaders = exports.simpleResponseHeaders;
단순 요청 헤더 내보내기: 교차 도메인 요청에서 클라이언트로부터 허용되는 요청 헤더를 정의합니다.
simpleResponseHeaders 내보내기: 서버에서 클라이언트로 허용되는 응답 헤더를 정의합니다.
checkOriginMatch = function (originHeader, origins, callback) {
if (typeof origins === "function") {
origins(originHeader, function (err, allow) {
callback(err, allow);
});
} else if (origins.length > 0) {
callback(null, origins.some(function (origin) {
return origin === originHeader;
}));
} else {
callback(null, true);
}
};
checkOriginMatch 함수: 요청 원본이 허용 원본 목록과 일치하는지 확인합니다. 일치하면 요청이 허용됩니다.
exports.create = function (options) {
options = options || {};
options.origins = options.origins || origin;
options.methods = options.methods || simpleMethods;
초기화. 아무것도 제공되지 않은 경우 출처 및 simpleMethods의 기본값을 사용합니다.
요청 및 응답 헤더 설정
if (options.hasOwnProperty("requestHeaders") === true) {
options.requestHeaders = toLowerCase(options.requestHeaders);
} else {
options.requestHeaders = simpleRequestHeaders;
}
if (options.hasOwnProperty("responseHeaders") === true) {
options.responseHeaders = toLowerCase(options.responseHeaders);
} else {
options.responseHeaders = simpleResponseHeaders;
}
허용되는 요청(requestHeaders) 및 응답(responseHeaders) 헤더를 설정합니다. 지정된 요청 또는 응답 헤더를 소문자로 변환합니다.
추가 미들웨어 구성
options.maxAge = options.maxAge || null;
options.supportsCredentials = options.supportsCredentials || false;
if (options.hasOwnProperty("endPreflightRequests") === false) {
options.endPreflightRequests = true;
}
maxAge: CORS 실행 전의 최대 캐시 기간을 지정합니다. supportCredentials: 서버가 도메인 간 요청에서 자격 증명(쿠키 또는 토큰)을 지원하는지 결정합니다. endPreflightRequests: 서버가 실행 전 요청(OPTIONS)을 종료해야 하는지 아니면 다음 미들웨어로 진행해야 하는지 결정합니다.
return function (req, res, next) {
if (!req.headers.hasOwnProperty("origin")) {
next();
} else {
checkOriginMatch(req.headers.origin, options.origins, function (err, originMatches) {
if (err !== null) {
next(err);
} else {
var endPreflight = function () {
if (options.endPreflightRequests === true) {
res.writeHead(204);
res.end();
} else {
next();
}
};
함수 endPreflight: endPreflightRequests가 true로 설정된 경우 실행 전(OPTIONS) 요청을 종료합니다. 출처 확인: checkOriginMatch를 사용하여 요청 출처가 허용된 출처와 일치하는지 확인합니다.
실행 전 요청 처리(OPTIONS)
if (req.method === "OPTIONS") {
if (!req.headers.hasOwnProperty("access-control-request-method")) {
endPreflight();
} else {
requestMethod = req.headers["access-control-request-method"];
if (req.headers.hasOwnProperty("access-control-request-headers")) {
requestHeaders = toLowerCase(req.headers["access-control-request-headers"].split(/,\s*/));
} else {
requestHeaders = [];
}
methodMatches = options.methods.indexOf(requestMethod) !== -1;
if (!methodMatches) {
endPreflight();
} else {
headersMatch = requestHeaders.every(function (requestHeader) {
return options.requestHeaders.includes(requestHeader);
});
if (!headersMatch) {
endPreflight();
} else {
if (options.supportsCredentials) {
res.setHeader("Access-Control-Allow-Origin", req.headers.origin);
res.setHeader("Access-Control-Allow-Credentials", "true");
} else {
res.setHeader("Access-Control-Allow-Origin", "*");
}
if (options.maxAge !== null) {
res.setHeader("Access-Control-Max-Age", options.maxAge);
}
res.setHeader("Access-Control-Allow-Methods", options.methods.join(","));
res.setHeader("Access-Control-Allow-Headers", options.requestHeaders.join(","));
endPreflight();
}
}
}
}
요청 방법 및 헤더 일치: 요청 방법과 헤더가 허용된 것과 일치하는지 확인합니다. CORS 응답 헤더: Access-Control-Allow-Origin, Access-Control-Allow-Credentials, Access-Control-Allow-Methods 등과 같은 CORS 헤더를 설정합니다.
응답에 헤더 노출
} 그 밖의 {
if (options.supportsCredentials) {
res.setHeader("Access-Control-Allow-Origin", req.headers.origin);
res.setHeader("Access-Control-Allow-Credentials", "true");
} 그 밖의 {
res.setHeader("Access-Control-Allow-Origin", "*");
}
"use strict";
/*jshint node:true */
var simpleMethods, simpleRequestHeaders, simpleResponseHeaders, toLowerCase, checkOriginMatch, origin;
Object.defineProperty(exports, "simpleMethods", {
get: function () {
return [
"GET",
"HEAD",
"POST",
"PUT",
"DELETE"
];
}
});
simpleMethods = exports.simpleMethods;
Object.defineProperty(exports, "origin", {
get: function () {
return ["http://localhost:3000"];
}
});
origin = exports.origin;
Object.defineProperty(exports, "simpleRequestHeaders", {
get: function () {
return ["accept", "accept-language", "content-language", "content-type", "authorization", "token"];
}
});
simpleRequestHeaders = exports.simpleRequestHeaders;
Object.defineProperty(exports, "simpleResponseHeaders", {
get: function () {
return ["cache-control", "content-language", "content-type", "expires", "last-modified", "pragma"];
}
});
simpleResponseHeaders = exports.simpleResponseHeaders;
Access-Control-Expose-Headers: simpleResponseHeaders에 포함되지 않은 사용자 정의 헤더가 있는 경우 클라이언트가 액세스할 수 있는 응답 헤더를 설정합니다.
라이브러리를 사용하지 않고 Node.js에서 사용자 정의 CORS를 구현하는 방법입니다. 전체 스크립트를 보려면 이 예시를 참조하세요.
위 내용은 Nodejs 사용자 정의 CORS의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
