Nginx 서버 구축을 위한 도메인 간 액세스 구성 및 CORS 프로토콜 지원 가이드-엔진스-php.cn

Nginx 서버 구축을 위한 도메인 간 액세스 구성 및 CORS 프로토콜 지원 가이드

WBOY

풀어 주다： 2023-08-04 22:57:08

원래의

2816명이 탐색했습니다.

Nginx 서버 구축 교차 도메인 액세스 구성 및 CORS 프로토콜 지원 가이드

소개:
현재 웹 애플리케이션 개발에서 교차 도메인 요청은 일반적인 요구 사항이 되었습니다. 보안을 보장하기 위해 브라우저는 기본적으로 AJAX 요청을 통한 도메인 간 작업을 제한합니다. CORS(Cross-Origin Resource Sharing) 프로토콜은 개발자에게 도메인 간 액세스에 대한 제어 가능한 인증을 달성할 수 있는 안정적인 솔루션을 제공합니다.

Nginx는 고성능 웹 서버이자 역방향 프록시 서버입니다. 이 기사에서는 Nginx를 사용하여 서버의 도메인 간 액세스 구성 및 CORS 프로토콜 지원을 구축하는 방법을 소개합니다.

서버에 대한 도메인 간 액세스 구성
다른 도메인 이름의 액세스를 승인하려면 먼저 Nginx 구성 파일에 도메인 간 액세스 구성을 추가해야 합니다. Nginx 구성 파일(일반적으로 /etc/nginx/nginx.conf)을 열고 http 섹션에 다음 구성을 추가합니다.

http {
    ...
    
    # 允许跨域访问
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    add_header Access-Control-Allow-Headers 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
    add_header Access-Control-Expose-Headers 'Content-Length,Content-Range';
}

로그인 후 복사

위 구성은 모든 도메인 이름(*)에서 액세스를 허용하고 GET, POST 및 OPTIONS를 지원합니다. 행동 양식. 동시에 몇 가지 일반적인 요청 헤더 정보도 지정합니다.

구성 파일을 저장하고 종료한 후 Nginx 구성을 다시 로드하여 이를 적용합니다.

$ sudo nginx -s reload

로그인 후 복사

CORS 프로토콜 지원 구성
서버에 도메인 간 액세스 구성을 추가한 후 CORS 프로토콜 지원을 보다 세부적으로 구성할 수도 있습니다. - 세분화된 방식. 다음은 지정된 도메인 이름에 대한 도메인 간 액세스만 허용하는 구성의 예입니다.

http {
    ...
    
    # 配置CORS
    map $http_origin $allowed_origin {
        default "";
        ~^https?://(www.)?example.com$ $http_origin;
        ~^https?://(www.)?example.net$ $http_origin;
    }
    
    server {
        ...
        
        location / {
            if ($allowed_origin != "") {
                add_header 'Access-Control-Allow-Origin' $allowed_origin;
                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
                add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
                add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
            }
            
            ...
        }
    }
}

로그인 후 복사

위 구성에서는 map 지시문을 사용하여 $allowed_origin</code을 정의합니다. > 변수, 사용 도메인 간 액세스를 허용하는 도메인 이름을 저장하는 데 사용됩니다. <code>location /은 server 블록에 구성되며 if 지시어는 현재 요청 소스의 도메인 이름이 서버에 있는지 확인하는 데 사용됩니다. 허용 목록. 그렇다면 해당 CORS 헤더 정보를 추가하세요. 또한 필요에 따라 더 많은 규칙을 추가할 수도 있습니다. map指令来定义一个$allowed_origin变量，用于存储允许跨域访问的域名。在server块中配置了location /，并通过if指令判断当前请求来源的域名是否在允许列表中。如果是，则添加相应的CORS头信息。此外，我们也可以根据自己的需要添加更多的规则。

CORS请求的预检（preflight）
在某些情况下，跨域请求需要进行预检操作。例如使用了自定义的请求头信息或非简单请求（例如PUT、DELETE等）时。预检请求是在实际请求之前发送的一种OPTIONS请求，用于获取服务器对实际请求的授权。

为了支持预检请求，我们只需要在location /

경우에 따라 도메인 간 요청에는 실행 전 작업이 필요합니다. 예를 들어, 사용자 정의 요청 헤더 정보나 단순하지 않은 요청(예: PUT, DELETE 등)이 사용되는 경우입니다. 실행 전 요청은 실제 요청에 대한 서버의 인증을 얻기 위해 실제 요청 전에 전송된 OPTIONS 요청입니다.

실행 전 요청을 지원하려면 location/ 블록에 다음 구성만 추가하면 됩니다.

location / {
    ...
    
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' $allowed_origin;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';

        return 204;
    }
    
    ...
}

로그인 후 복사

위 구성에서 요청 방법이 OPTIONS인 경우 204( No Content ) 및 CORS 헤더 정보를 추가합니다.