Nginx 프록시 서버를 통해 CORS(교차 원본 리소스 공유) 지원을 구현하는 방법은 무엇입니까?

Nginx 프록시 서버를 통해 CORS(교차 원본 리소스 공유) 지원을 구현하는 방법은 무엇입니까?

소개:
CORS(Cross-Origin Resource Sharing)는 서버가 다양한 소스(도메인, 프로토콜 또는 포트)의 요청을 처리할 때 특정 리소스에 대한 액세스 권한을 부여할 수 있도록 하는 메커니즘입니다. 실제 애플리케이션에서는 Nginx 프록시 서버를 통해 리소스 공유를 달성해야 하는 경우가 많습니다. 이 기사에서는 Nginx 구성을 통해 CORS를 지원하는 방법을 소개합니다.

1단계: Nginx 설치 및 구성

1. Nginx 설치
먼저 Nginx가 서버에 설치되어 있는지 확인하세요. 설치되어 있지 않은 경우 운영 체제에 따라 적절한 설치 방법을 선택하십시오.

2. Nginx 구성 파일 편집
텍스트 편집기를 사용하여 일반적으로 /etc/nginx/nginx.conf 또는 /etc/nginx/conf.d에 있는 Nginx 구성 파일을 엽니다. /기본 .conf. /etc/nginx/nginx.conf或/etc/nginx/conf.d/default.conf。

3.添加CORS配置
在配置文件的server块中添加以下代码，以启用CORS支持：

location / {
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT, X-CustomHeader, Keep-Alive, User-Agent, X-Requested-With, If-Modified-Since, Cache-Control, Content-Type';
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        add_header 'Content-Length' 0;
        return 204;
    }
    if ($request_method = 'POST') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT, X-CustomHeader, Keep-Alive, User-Agent, X-Requested-With, If-Modified-Since, Cache-Control, Content-Type';
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
    }
    if ($request_method = 'GET') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT, X-CustomHeader, Keep-Alive, User-Agent, X-Requested-With, If-Modified-Since, Cache-Control, Content-Type';
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
    }
}

以上配置将允许任何来源的请求进行跨域访问，并允许常见的请求方法（GET、POST、OPTIONS）。'Access-Control-Allow-Headers'指定了允许的请求头，'Access-Control-Expose-Headers'指定了允许的响应头。

4.保存并重启Nginx
保存配置文件，并重启Nginx服务，使配置生效。可以使用以下命令来重启Nginx：

sudo service nginx restart

步骤二：测试CORS支持

为了验证CORS配置的有效性，我们可以使用浏览器的开发工具来查看请求和响应头信息。

1.打开浏览器开发工具
在浏览器中打开开发者工具（一般是按F12键），切换到"Network"（网络）选项卡。

2.发送跨域请求
通过JavaScript代码或者直接在浏览器地址栏输入一个跨域地址，发送跨域请求。例如，假设我们的Nginx代理服务器的地址为http://example.com，并且我们要访问的跨域URL为http://api.example.com/data。

3.查看请求和响应头
在开发者工具的“Network”选项卡中，选中对应的请求，然后点击它以展开详细信息。可以在请求和响应的头部信息中找到Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers

3. CORS 구성 추가

CORS 지원을 활성화하려면 구성 파일의 server 블록에 다음 코드를 추가하세요.
rrreee

위 구성을 사용하면 모든 원본 및 일반적인 요청 방법(GET, POST, OPTIONS)을 허용합니다. 'Access-Control-Allow-Headers'는 허용되는 요청 헤더를 지정하고 'Access-Control-Expose-Headers'는 허용되는 응답 헤더를 지정합니다. 🎜🎜4. Nginx를 저장하고 다시 시작하세요.🎜구성 파일을 저장하고 Nginx 서비스를 다시 시작하여 구성을 적용하세요. 다음 명령을 사용하여 Nginx를 다시 시작할 수 있습니다. 🎜rrreee🎜2단계: CORS 지원 테스트🎜🎜CORS 구성의 유효성을 확인하기 위해 브라우저의 개발 도구를 사용하여 요청 및 응답 헤더 정보를 볼 수 있습니다. 🎜🎜1. 브라우저 개발 도구를 엽니다. 🎜브라우저에서 개발자 도구를 열고(보통 F12 키를 누름) "네트워크" 탭으로 전환합니다. 🎜🎜2. 교차 도메인 요청 보내기🎜JavaScript 코드를 통해 교차 도메인 요청을 보내거나 브라우저 주소 표시줄에 교차 도메인 주소를 직접 입력하세요. 예를 들어 Nginx 프록시 서버의 주소가 http://example.com이고 액세스하려는 도메인 간 URL이 http://api.example이라고 가정합니다. com/data. 🎜🎜3. 요청 및 응답 헤더 보기🎜개발자 도구의 '네트워크' 탭에서 해당 요청을 선택하고 클릭하여 세부정보를 펼칩니다. <code>Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers 및 기타 관련 항목을 찾을 수 있습니다. CORS 지원을 확인하기 위한 헤더 정보입니다. 🎜🎜요약: 🎜Nginx를 구성하면 CORS(교차 도메인 리소스 공유) 지원을 쉽게 구현할 수 있습니다. Nginx 프록시 서버가 CORS를 지원하도록 하려면 Nginx 구성 파일에 일부 헤더 정보를 추가하기만 하면 됩니다. 이렇게 하면 교차 도메인 요청이 서로 다른 도메인 간에 제대로 작동하도록 할 수 있습니다. 🎜

위 내용은 Nginx 프록시 서버를 통해 CORS(교차 원본 리소스 공유) 지원을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!