浅谈解决前端跨域的两个方法

版权声明:欢迎分享、转发,如需转载,请联系本人并标明出处及原链接,非经本人授权许可,禁止转载! https://blog.csdn.net/sinat_28296757/article/details/80771082

在前端开发中在使用Ajax调用后端接口的时候经常会遇到跨域的问题,导致不能拿到后端接口返回的数据.下面我们来看看解决跨域的几个方法.
在解决跨域问题的前,我们先来了解一下什么是跨域,跨域:即请求的地址与被请求的地址协议头、域名、端口有一个不一样就叫跨域.相反,不跨域即叫同源,同源:即协议头、域名、端口完全一致就叫同源;

如:(http://www.example.com/detail.html) 与以下地址对比
http://api.example.com/detail.html | 不同源 | 域名不同 |
https://www.example.com/detail.html | 不同源 | 协议不同 |
http://www.example.com:8080/detail.html | 不同源 | 端口不同
http://api.example.com:8080/detail.html | 不同源 | 域名、端口不同
https://api.example.com/detail.html | 不同源 | 协议、域名不同
https://www.example.com:8080/detail.html | 不同源 | 端口、协议不同
http://www.example.com/other.html | 同源 | 只是目录不同 |

控制台常见的跨域报错

这个报错的原理是浏览器自身从安全角度考虑,不允许跨域访问.
我们解决跨域的问题就可以从以上问题对症下药.

1.通过使用Jsonp解决跨域问题.
JSONP:即JSON with Padding,是一种借助于 script 标签发送跨域请求的技巧方案。

我们知道使用img标签,link标签,script标签的src属性是可以访问网络上的资源的,如访问线上图片,使用CDN等.但是img和link的src属性没办法拿到响应体,也就是拿不到数据,script可以拿到响应体所以我们可以通过script这个标签来解决跨域的问题.如:

<script>
    function test(json) {
        console.log('我被调用了');
        console.log(json);
    }
</script>
<script src="http://api.douban.com/v2/movie/top250?callback=test"></script>

F12打开控制台,我们可以看到



我们可以看到,我们预先定义了一个函数叫test,再然后在src里加了一个参数callback=test,可以发现,当请求完成,会自动调用test这个函数,并且把响应体(JSON数据)当做参数传递过来.实际上是浏览器用script的src去发起请求,并且传递一个参数叫callback=函数名,服务器接收到这个函数名,在返回的响应体里面调用这个函数,并且把json当做参数传递.
注意:(1).Jsonp不是一套新技术,只是聪明的程序员想出的一套方案
(2)能不能用这套方案,要看服务器端代码怎么写,服务器端如果写了调用函数的代码,那么就能支持JSONP方案.

如果是在JQuery中使用Ajax,则只需要在dataType属性中把json改为jsonp即可;


我们可以看到,我们预先定义了一个函数叫test,再然后在src里加了一个参数callback=test,可以发现,当请求完成,会自动调用test这个函数,并且把响应体(JSON数据)当做参数传递过来.实际上是浏览器用script的src去发起请求,并且传递一个参数叫callback=函数名,服务器接收到这个函数名,在返回的响应体里面调用这个函数,并且把json当做参数传递.
注意:(1).Jsonp不是一套新技术,只是聪明的程序员想出的一套方案
(2)能不能用这套方案,要看服务器端代码怎么写,服务器端如果写了调用函数的代码,那么就能支持JSONP方案.
如果是在JQuery中使用Ajax,则只需要在dataType属性中把json改为jsonp即可;

22.PNG

2.使用CORS解决跨域问题.
CORS:即Cross Origin Resource Share,跨域资源共享.这个是直接从服务器端解决Ajax跨域访问的问题.
我们只需要在服务端文件加上header('Access-Control-Allow-Origin: *');
如:


<?php 
    $json = array("name"=>"jack","age"=>16);
    //代表告诉浏览器,我允许任意域名访问我这个接口
    //如果写一个*,代表所有域名都可以来访问我
    // header('Access-Control-Allow-Origin: *');
    //如果写的是指定域名,代表只有这个域名可以访问
    header('Access-Control-Allow-Origin: *');
    echo json_encode($json);
?>
我们可以看到,我们预先定义了一个函数叫test,再然后在src里加了一个参数callback=test,可以发现,当请求完成,会自动调用test这个函数,并且把响应体(JSON数据)当做参数传递过来.实际上是浏览器用script的src去发起请求,并且传递一个参数叫callback=函数名,服务器接收到这个函数名,在返回的响应体里面调用这个函数,并且把json当做参数传递.
注意:(1).Jsonp不是一套新技术,只是聪明的程序员想出的一套方案
(2)能不能用这套方案,要看服务器端代码怎么写,服务器端如果写了调用函数的代码,那么就能支持JSONP方案.
如果是在JQuery中使用Ajax,则只需要在dataType属性中把json改为jsonp即可;
之前我们知道,跨域访问的问题是因为浏览器考虑到安全的问题而禁止访问,这句代码的作用就是告诉浏览器我的数据可以让所有的地址访问,不用保护我,*字符表示任何网站都可以访问.当然也可以设置制定访问的地址,把*改为你指定的地址即可,多个地址用逗号分隔;
以上如有理解不到位的,欢迎指正,谢谢!
展开阅读全文

没有更多推荐了,返回首页