> 웹 프론트엔드 > 프런트엔드 Q&A > Node.js의 크로스 도메인 설정 방법을 소개하는 글입니다.

Node.js의 크로스 도메인 설정 방법을 소개하는 글입니다.

PHPz
풀어 주다: 2023-04-05 09:43:10
원래의
2378명이 탐색했습니다.

인터넷의 발달과 함께 프론트엔드와 백엔드의 분리 추세가 점점 더 뚜렷해지고 있습니다. 프런트엔드와 백엔드 분리 개발에서 프런트엔드 페이지에서 백엔드 API 인터페이스를 요청할 때 크로스 도메인 문제로 인해 많은 불편을 초래합니다. 이 글에서는 Node.js의 도메인 간 설정 방법을 소개합니다.

1. 크로스 도메인이란

1.1 동일 출처 정책이란

웹 보안 분야에서 동일 출처 정책이란 프로토콜, 도메인 이름, 포트 번호가 완전히 일치해야 함을 의미합니다. 하나의 소스 문서에서 다른 소스에 액세스하려면 일관성이 있어야 합니다. 간단히 말해서, 페이지의 JavaScript는 자신과 동일한 소스의 문서만 읽고 작업할 수 있습니다.

1.2 교차 도메인이란 무엇입니까?

도메인 이름 A의 웹 페이지가 스크립트를 통해 도메인 이름 B의 리소스에 액세스한다고 가정합니다.

2. Node.js 도메인 간 설정

2.1 Cors 모듈 설치

Cors는 도메인 간 액세스를 허용하는 Node.js 모듈입니다. 설치만 하면 도메인 간 문제를 쉽게 해결할 수 있습니다.

npm install cors

2.2 Node.js에서 Cors 모듈 사용

Express 프레임워크에서 cors를 직접 사용하면 도메인 간 문제를 해결할 수 있습니다.

const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());
로그인 후 복사

위 코드는 프로젝트의 모든 경로에 대해 CORS를 활성화합니다. 특정 경로에서만 활성화하려면 다음 코드를 사용할 수 있습니다.

const express = require('express');
const cors = require('cors');
const app = express();
const router = express.Router();

const corsOptions = {
    origin: 'http://example.com', // 允许访问的域名
    optionsSuccessStatus: 200 // some legacy browsers (IE11, various SmartTVs) choke on 204
};

router.get('/', cors(corsOptions), function(req, res) {
    //...
});

app.use('/', router);
로그인 후 복사

2.3 사용자 정의 교차 도메인 설정

더 많은 것을 원할 경우 자세한 도메인 간 설정을 통해 다양한 cors 옵션을 사용하여 사용자 정의할 수 있습니다. 다음은 일반적으로 사용되는 몇 가지 옵션입니다.

const corsOptions = {
    origin: 'http://example.com', // String: 允许访问的域名,可以是字符串或正则表达式
    methods: ['GET', 'POST'], // Array: 允许的HTTP请求方法
    allowedHeaders: ['Content-Type'], // Array: 允许使用的自定义Header
    exposedHeaders: ['Content-Type'], // Array: 允许客户端访问的响应头
    credentials: true, // Boolean: 是否发送Cookies
    maxAge: 86400 // Number: 预检请求缓存时间,单位秒
};
app.use(cors(corsOptions));
로그인 후 복사

3. 요약

Node.js는 도메인 간 문제를 쉽게 해결할 수 있는 cors 모듈을 제공합니다. Express 프레임워크에서는 단 한 줄의 코드로 CORS를 활성화할 수 있습니다. 동시에 보다 유연한 요구 사항을 충족하도록 교차 도메인 설정을 사용자 정의할 수도 있습니다.

위 내용은 Node.js의 크로스 도메인 설정 방법을 소개하는 글입니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿