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

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를 다시 시작할 수 있습니다. rrreee2단계: CORS 지원 테스트CORS 구성의 유효성을 확인하기 위해 브라우저의 개발 도구를 사용하여 요청 및 응답 헤더 정보를 볼 수 있습니다. 1. 브라우저 개발 도구를 엽니다. 브라우저에서 개발자 도구를 열고(보통 F12 키를 누름) "네트워크" 탭으로 전환합니다. 2. 교차 도메인 요청 보내기JavaScript 코드를 통해 교차 도메인 요청을 보내거나 브라우저 주소 표시줄에 교차 도메인 주소를 직접 입력하세요. 예를 들어 Nginx 프록시 서버의 주소가 http://example.com이고 액세스하려는 도메인 간 URL이

http://api.example이라고 가정합니다. com/data. 3. 요청 및 응답 헤더 보기개발자 도구의 '네트워크' 탭에서 해당 요청을 선택하고 클릭하여 세부정보를 펼칩니다. Access-Control-Allow-Origin,
       Access-Control-Allow-Methods,
       Access-Control-Allow-Headers및 기타 관련 항목을 찾을 수 있습니다. CORS 지원을 확인하기 위한 헤더 정보입니다. 요약: Nginx를 구성하면 CORS(교차 도메인 리소스 공유) 지원을 쉽게 구현할 수 있습니다. Nginx 프록시 서버가 CORS를 지원하도록 하려면 Nginx 구성 파일에 일부 헤더 정보를 추가하기만 하면 됩니다. 이렇게 하면 교차 도메인 요청이 서로 다른 도메인 간에 제대로 작동하도록 할 수 있습니다.
       위 내용은 Nginx 프록시 서버를 통해 CORS(교차 원본 리소스 공유) 지원을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!