웹사이트 교차 도메인을 위한 5가지 솔루션

브라우저는 동일 출처 정책을 사용하기 때문에 도메인 간 요청이 생성됩니다. 웹 페이지가 다른 도메인 이름/다른 프로토콜/다른 포트를 사용하여 다른 웹 페이지에서 리소스를 요청합니다. 이 기사에서는 웹사이트 교차 도메인 문제를 해결하는 5가지 방법을 제공합니다. 관심 있는 친구는 한 번 살펴볼 수 있습니다.

1. 도약이란 무엇입니까?

• 웹페이지가 다른 도메인 이름/다른 프로토콜/다른 포트를 사용하여 다른 웹페이지의 리소스를 요청합니다.
• 교차 도메인 이유: 현재 도메인 이름 요청 웹사이트에서는 Ajax 요청을 통해 다른 도메인 이름을 보내는 것이 기본적으로 허용되지 않습니다.

2. 교차 도메인 요청이 생성되는 이유는 무엇입니까?

• 브라우저는 동일 출처 정책을 사용하기 때문입니다

3. 동일 출처 정책이란 무엇인가요?

• 동일 출처 정책은 Netscape에서 제안한 잘 알려진 보안 정책입니다. 이제 JavaScript를 지원하는 모든 브라우저가 이 정책을 사용합니다. 동일 출처 정책은 브라우저의 핵심이자 가장 기본적인 보안 기능으로, 동일 출처 정책이 누락될 경우 브라우저의 정상적인 기능에 영향을 미칠 수 있습니다. 웹은 동일 출처 정책을 기반으로 구축되었으며, 브라우저는 동일 출처 정책의 구현일 뿐이라고 할 수 있습니다.

4. 브라우저는 왜 동일한 출처 정책을 사용합니까?

• 은 사용자 정보의 보안을 보장하고 악의적인 웹사이트가 데이터를 도용하는 것을 방지하기 위한 것입니다. 웹페이지가 동일한 원본 요구 사항을 충족하지 않으면 다음을 수행할 수 없습니다.

• • 1. , IndexDB
• • 2. DOM 가져오기
• • 3. AJAX 요청을 보낼 수 없습니다.

동일 출처 정책의 비절대적 특성:

<script></script>
<img/>
<iframe/>
<link/>
<video/>
<audio/>

와 같은 src 속성이 있는 태그

다양한 도메인의 리소스를 로드하고 실행할 수 있습니다. 다른 플러그인에 대한 동일 출처 정책: Flash, Java 애플릿, Silverlight 및 Google Gears와 같은 브라우저에서 로드된 타사 플러그인에도 자체 동일 출처 정책이 있습니다. 그러나 이러한 동일 출처 정책은 속하지 않습니다. 브라우저의 기본 동일 출처 정책에 허점이 있으면 해커에게 악용되어 XSS 공격의 결과를 초래할 수 있습니다.

소위 동일 출처란 도메인 이름, 네트워크 프로토콜 및 포트 번호가 동일함을 의미합니다. . 셋 중 하나가 다르면 크로스 도메인이 발생합니다. 예를 들어, 브라우저를 사용하여 http://baidu.com을 열었는데, 브라우저가 JavaScript 스크립트를 실행하면 해당 스크립트가 http:/에 요청을 보내는 것으로 나타났습니다. /cloud.baidu.com 도메인 이름을 사용하면 브라우저에서 도메인 간 오류인 오류를 보고합니다. http://baidu.com，浏览器执行JavaScript脚本时发现脚本向http://cloud.baidu.com域名发请求，这时浏览器就会报错，这就是跨域报错。

解决方案有五：

1、前端使用jsonp （不推荐使用）

• 当我们正常地请求一个JSON数据的时候，服务端返回的是一串 JSON类型的数据，而我们使用 JSONP模式来请求数据的时候服务端返回的是一段可执行的 JavaScript代码。因为jsonp 跨域的原理就是用的动态加载 script的src ，所以我们只能把参数通过 url的方式传递,所以jsonp的 type类型只能是get示例：

$.ajax({
    url: 'http://192.168.1.114/yii/demos/test.php', //不同的域
    type: 'GET', // jsonp模式只有GET 是合法的
    data: {
        'action': 'aaron'
    },
    dataType: 'jsonp', // 数据类型
    jsonp: 'backfunc', // 指定回调函数名，与服务器端接收的一致，并回传回来
})

• 使用JSONP 模式来请求数据的整个流程：客户端发送一个请求，规定一个可执行的函数名（这里就是 jQuery做了封装的处理，自动帮你生成回调函数并把数据取出来供success属性方法来调用,而不是传递的一个回调句柄），服务器端接受了这个 backfunc函数名，然后把数据通过实参的形式发送出去
   
• （在jquery 源码中， jsonp的实现方式是动态添加3f1c4e4b6b16bbbd69b2ee476dc4f83a标签来调用服务器提供的 js脚本。jquery 会在window对象中加载一个全局的函数，当 3f1c4e4b6b16bbbd69b2ee476dc4f83a代码插入时函数执行，执行完毕后就 3f1c4e4b6b16bbbd69b2ee476dc4f83a

  5가지 솔루션이 있습니다:

1. 프런트 엔드에서 jsonp 사용(권장되지 않음)

경우 우리는 일반적인 요청을 합니다. JSON 데이터를 수신하면 서버는 JSON 유형 데이터의 문자열을 반환하고, JSONP 모드를 사용하여 데이터를 요청하면 서버는 실행 가능한 JavaScript 코드를 반환합니다. jsonp의 도메인 간 원칙은 스크립트의 src를 동적으로 로드하는 것이므로 URL을 통해서만 매개변수를 전달할 수 있으므로 jsonp 유형 유형은 get만 가능합니다. 요청 데이터 전체 프로세스: 클라이언트는 실행 가능한 함수 이름을 지정하여 요청을 보냅니다(여기서 jQuery는 캡슐화 프로세스를 수행하고 자동으로 콜백 함수를 생성하며 콜백을 전달하는 대신 호출할 성공 속성 메서드에 대한 데이터를 가져옵니다). 핸들), 서버는 backfunc 함수 이름을 수락한 다음 실제 매개변수 형식으로 데이터를 보냅니다

• (jquery 소스 코드에서 jsonp는 3f1c4e4b6b16bbbd69b2ee476dc4f83a를 동적으로 추가하여 구현됩니다. code> 태그를 사용하여 서버에서 제공하는 js 스크립트를 호출합니다. jquery는 <code>3f1c4e4b6b16bbbd69b2ee476dc4f83a 코드를 삽입하면 함수가 실행됩니다. 3f1c4e4b6b16bbbd69b2ee476dc4f83a는 동시에 삭제되며, 요청이 동일한 도메인 이름에 속하는 경우 일반 Ajax 요청처럼 작동합니다.

2. 백그라운드 Http 요청 전달

• 전달에 HttpClinet 전달 사용(이 방법은 간단한 예에는 권장되지 않음)

try {
    HttpClient client = HttpClients.createDefault();            //client对象
    HttpGet get = new HttpGet("http://localhost:8080/test");    //创建get请求
    CloseableHttpResponse response = httpClient.execute(get);   //执行get请求
    String mes = EntityUtils.toString(response.getEntity());    //将返回体的信息转换为字符串
    System.out.println(mes);
} catch (ClientProtocolException e) {
    e.printStackTrace();
} catch (IOException e) {
    e.printStackTrace();
}

3. 동일 출처 Cors의 백그라운드 구성(권장)

교차 도메인 SpringBoot2.0에서 사용 다음 코드 구성은 프런트엔드 및 백엔드 교차 도메인 요청 문제를 완벽하게 해결할 수 있습니다

• 다음 코드 구성은 SpringBoot2의 프런트엔드 및 백엔드 교차 도메인 요청 문제를 완벽하게 해결할 수 있습니다. .0

  import org.springframework.context.annotation.Bean;
  import org.springframework.context.annotation.Configuration;
  import org.springframework.web.cors.CorsConfiguration;
  import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
  import org.springframework.web.filter.CorsFilter;
  
  /**
   * 实现基本的跨域请求
   * @author linhongcun
   *
   */
  @Configuration
  public class CorsConfig {
  
      @Bean
      public CorsFilter corsFilter() {
          final UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
          final CorsConfiguration corsConfiguration = new CorsConfiguration();
          /*是否允许请求带有验证信息*/
          corsConfiguration.setAllowCredentials(true);
          /*允许访问的客户端域名*/
          corsConfiguration.addAllowedOrigin("*");
          /*允许服务端访问的客户端请求头*/
          corsConfiguration.addAllowedHeader("*");
          /*允许访问的方法名,GET POST等*/
          corsConfiguration.addAllowedMethod("*");
          urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);
          return new CorsFilter(urlBasedCorsConfigurationSource);
      }
  
  
  
  }

4. SpringCloud 게이트웨이 사용

• 🎜라우팅 센터라고도 하는 서비스 게이트웨이(zuul)는 모든 API 인터페이스에 균일하게 액세스하고 서비스를 유지하는 데 사용됩니다. 🎜🎜🎜🎜Spring Cloud Zuul은 Spring Cloud Eureka와의 통합을 통해 서비스 인스턴스의 자동 유지 관리를 구현하므로 서비스 라우팅 구성을 사용할 때 기존 라우팅 구성 방식처럼 특정 서비스 인스턴스 주소를 지정할 필요가 없습니다. Ant 모드를 통한 매개변수🎜

5、使用nginx做转发

• 现在有两个网站想互相访问接口  在http://a.a.com:81/A中想访问 http://b.b.com:81/B 那么进行如下配置即可
• 然后通过访问 www.my.com/A 里面即可访问 www.my.com/B

server {
        listen       80;
        server_name  www.my.com;
        location /A {
            proxy_pass  http://a.a.com:81/A;
            index  index.html index.htm;
        }
        location /B {
            proxy_pass  http://b.b.com:81/B;
            index  index.html index.htm;
        }
    }

• 如果是两个端口想互相访问接口  在http://b.b.com:80/Api中想访问 http://b.b.com:81/Api 那么进行如下配置即可
• 使用nginx转发机制就可以完成跨域问题

server {
        listen       80;
        server_name  b.b.com;
        location /Api {
            proxy_pass  http://b.b.com:81/Api;
            index  index.html index.htm;
        }
    }

希望本篇文章对你有所帮助。

위 내용은 웹사이트 교차 도메인을 위한 5가지 솔루션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!