旗下导航:搜·么
当前位置:网站首页 > PHP教程 > 正文

网站跨域的五种处理体式格局【php教程】

作者:搜搜PHP网发布时间:2019-11-26分类:PHP教程浏览:116


导读:由于阅读器运用了同源战略,所以发生跨域请求。一个网页向另一个差别域名/差别协定/差别端口的网页请求资本,这就是跨域。本篇文章供应了5种体式格局来处置惩罚网站跨域,感兴趣的朋侪能够看...
由于阅读器运用了同源战略,所以发生跨域请求。一个网页向另一个差别域名/差别协定/差别端口的网页请求资本,这就是跨域。本篇文章供应了5种体式格局来处置惩罚网站跨域,感兴趣的朋侪能够看看。

1、什么是逾越?

  • 一个网页向另一个差别域名/差别协定/差别端口的网页请求资本,这就是跨域。
  • 跨域缘由发生:在当前域名请求网站中,默许不许可经由过程ajax请求发送其他域名。

2、为何会发生跨域请求?

  • 由于阅读器运用了同源战略

3、什么是同源战略?

  • 同源战略是Netscape提出的一个有名的平安战略,如今一切支撑JavaScript的阅读器都邑运用这个战略。同源战略是阅读器最中间也最基础的平安功用,假如缺乏同源战略,阅读器的一般功用能够受到影响。能够说web是构建在同源战略的基础之上的,阅读器只是针对同源战略的一种完成。

4、为何阅读器要运用同源战略?

  • 是为了保证用户的信息平安,防备歹意网站盗取数据,假如网页之间不满足同源请求,将不能:

    • 1、同享Cookie、LocalStorage、IndexDB
    • 2、猎取DOM
    • 3、AJAX请求不能发送

同源战略的非绝对性:

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

等带有src属性的标签能够从差别的域加载和实行资本。其他插件的同源战略:flash、java applet、silverlight、googlegears等阅读器加载的第三方插件也有各自的同源战略,只是这些同源战略不属于阅读器原生的同源战略,假如有破绽则能够被黑客应用,从而留下XSS进击的后患

所谓的同源指:域名、收集协定、端口号雷同,三条有一条差别就会发生跨域。 比方:你用阅读器翻开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的完成体式格局是动态增加<script>标签来挪用效劳器供应的 js剧本。jquery 会在window对象中加载一个全局的函数,当 <script>代码插入时函数实行,实行终了后就 <script>会被移除。同时jquery还对非跨域的请求举行了优化,假如这个请求是在同一个域名下那末他就会像一般的 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;
        }
    }

愿望本篇文章对你有所协助。

以上就是网站跨域的五种处置惩罚体式格局的细致内容,更多请关注ki4网别的相干文章!

标签:网站跨域httpajax