Nginx는 도메인 간 액세스를 어떻게 구현합니까? Nginx 도메인 간 액세스 구현

이 기사에서는 Nginx가 도메인 간 액세스를 구현하는 방법을 소개합니다. Nginx 교차 도메인 액세스 구현에는 특정 참고 가치가 있습니다. 도움이 필요한 친구가 참고할 수 있기를 바랍니다.

1. 크로스 도메인이란 무엇인가요?

크로스 도메인은 한 도메인 이름의 웹페이지에서 다른 도메인 이름으로 리소스를 요청하는 것을 말합니다. 예를 들어 www.a.com 페이지에서 www.b.com의 리소스를 요청합니다.

브라우저는 일반적으로 기본적으로 도메인 간 액세스를 금지합니다. 안전하지 않기 때문에 CSRF(교차 사이트 요청 위조) 공격을 받기 쉽습니다.

2. Nginx는 도메인 간 액세스를 허용하도록 브라우저를 제어합니다.

Nginx는 Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-와 같은 HTTP 헤더 정보를 추가하여 브라우저 캐시를 제어합니다. 헤더 등..

"Access-Control-Allow-Origin" 도메인 간 요청을 허용하는 웹사이트 설정
"Access-Control-Allow-Methods" 도메인 간 요청을 허용하는 HTTP 메서드 설정
"Access-Control-Allow-Headers" 콘텐츠 유형 헤더를 포함하도록 도메인 간 요청 허용 설정

ngx_http_headers_module

Syntax

Syntax:    add_header name value [always];
Default:    —
Context:    http, server, location, if in location

애플리케이션 예제

1 vim conf.d/cross_site.conf

# 配置网站www.a.com
server {
    server_name www.a.com;
    root /vagrant/a;
    
    # 允许 http://www.b.com 使用 GET,POST,DELETE HTTP方法发起跨域请求
    add_header Access-Control-Allow-Origin http://www.b.com;
    add_header Access-Control-Allow-Method GET,POST,DELETE;
}

# 配置网站www.b.com
server {
    server_name www.b.com;
    root /vagrant/b;
}

# 配置网站www.c.com
server {
    server_name www.c.com;
    root /vagrant/c;
}

2. 초 reload load nginx 구성 파일을 입력하세요

3. /vagrant/a/a.txt, /vagrant/b/index.html, /를 생성하세요. vagrant/c /index.html 파일 /vagrant/a/a.txt、/vagrant/b/index.html、/vagrant/c/index.html 文件

• vim /vagrant/a/a.txt

Hello,I'm a!

• /vagrant/b/index.html

nbsp;html>

    
        <meta>
        <title>Ajax跨站访问b</title>
    
    
        <h1>Ajax跨站访问b - </h1>
    
    <script></script>
    <script>
    $(function(){
        $.ajax({
            url: "http://www.a.com/a.txt",
            type: "GET",
            success: function (data) {
                $(&#39;h1&#39;).append(data);
            },
            error: function (data) {
                $(&#39;h1&#39;).append(&#39;请求失败！&#39;);
            }
        });
    })
    </script>

• /vagrant/c/index.html

nbsp;html>

    
        <meta>
        <title>Ajax跨站访问c</title>
    
    
        <h1>Ajax跨站访问c - </h1>
    
    <script></script>
    <script>
    $(function(){
        $.ajax({
            url: "http://www.a.com/a.txt",
            type: "GET",
            success: function (data) {
                $(&#39;h1&#39;).append(data);
            },
            error: function (data) {
                $(&#39;h1&#39;).append(&#39;请求失败！&#39;);
            }
        });
    })
    </script>

4. 配置客户端的hosts文件（使用真是域名的可以忽略）

windows: C:WindowsSystem32driversetchosts
linux: /etc/hosts

添加如下内容，并保存（192.168.33.88为笔者虚拟机的IP，需自行替换为自己的IP）：

192.168.33.88 www.a.com
192.168.33.88 www.b.com
192.168.33.88 www.c.com

5. 浏览器分别访问 http://www.b.com/index.html 和 http://www.c.com/index.html

• vim /vagrant/a/a.txt

Ajax跨站访问b - Hello,I'm a!

• /vagrant/b/index.html

Ajax跨站访问c - 请求失败！

/vagrant /c/ index.html

Failed to load http://www.a.com/a.txt: The 'Access-Control-Allow-Origin' header has a value 'http://www.b.com' that is not equal to the supplied origin. Origin 'http://www.c.com' is therefore not allowed access.

4. 클라이언트의 호스트 파일을 구성합니다(실제 도메인 이름을 사용하는 경우 무시해도 됩니다)

windows: C:WindowsSystem32driversetchostslinux : /etc/hosts<br>

다음 내용을 추가하고 저장합니다(192.168.33.88은 작성자의 가상 머신 IP이므로 자신의 IP로 바꿔야 합니다):

rrreee

🎜5 . http://www.b.com/index.html 및 http://www.c.com/index.html🎜🎜🎜🎜🎜http를 방문하세요. //www.b.com/index.html 🎜🎜🎜rrreee🎜🎜🎜http://www.c.com/index.html🎜🎜🎜rrreee🎜브라우저의 개발자 모드 콘솔을 열면 http도 찾을 수 있습니다. ://www.c.com/index.html 페이지에서 오류가 발생했습니다: 🎜rrreee🎜 추천 관련 기사: 🎜🎜🎜Nginx는 브라우저 캐시를 제어하고 안티 리칭을 구현하는 정적 리소스 웹 서비스 역할을 합니다. 🎜🎜🎜🎜 Nginx는 정적 리소스 웹 서비스 역할을 하며 정적 리소스 압축을 수행합니다 🎜 🎜🎜🎜🎜

위 내용은 Nginx는 도메인 간 액세스를 어떻게 구현합니까? Nginx 도메인 간 액세스 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!