html页面添加跨域,HTML5实现跨域问题

20b81a4ecc55b294c6171959e1054504.gif

(求索web开发:www.qiusuoweb.com)在之前写了两篇关于跨域获取接口数据问题的解决方案。本篇将为大家介绍HTML5是如何解决跨域这个问题的。

仅凭HTML5新特性的优势,比起之前两种的解决方案想必这种方式会更加的简便和优雅。

确实如此,且看demo,在本地搭建测试两个测试服务器就不多介绍了,直接看跨域的代码:

1.a.qiusuoweb.com跨域访问页面: 和正常的ajax请求并无二意,在前端页面并不需要做跨域处理

ajax跨域异步请求数据接口

$.ajax({

type:"get",

url:"http://api.qiusuoweb.com/api.php?m=api2",

async:true,

dataType:'json',

success:function(data){

console.log(data);

document.getElementById('h1').innerHTML = data.name;

}

});

2.api.qiusuoweb.com接口端php代码

$m = isset($_GET['m'])?$_GET['m']:'';

$data = array(

'url' => 'www.qiusuoweb.com',

'name' => '求索网',

'time' => time(),

'author'=> 'chenxing'

);

if($m){

$m($data);

}

/**

* HTML5新增跨域测试接口

*/

function api2($data){

header('Access-Control-Allow-Origin:http://a.qiusuoweb.com');

echo json_encode($data);

}

整个跨域过程只需要在返回的数据前加上:header('Access-Control-Allow-Origin:http: //a.qiusuoweb.com')即可。也可以通过通配符的方式Access-Control-Allow-Origin:*;通配符允许所有域都可以请求是比较危险的一种行为,慎用。

关键词:Access-Control-Allow-Origin HTML5新增特性。

优点:

这个就像路由器的访问控制列表一样,可以由开发者去主动控制哪些域是可以安全请求的,即满足了跨域要求又不损害其安全性。

处理方便,比起之前的利用jsonp跨域,不需要前后的做处理,只要处理后端的接口代码就可以了。

提高代码的可以拓展性,如果想把项目的接口都加上跨域访问的形式,只要添加头部就行,不用去改其他代码,对原来的非跨域访问也不会造成影响,跨域和非跨域都可以共用同一个接口。

缺陷:

既然是HTML5的特性那么就要考虑浏览器的兼容性了。测试结果很遗憾的告诉你IE10以下的浏览器,都歇菜了。看来这种方式普遍使用还要等几年时光,那些低版浏览器都被市场淘汰了,大家就可以放心大胆的使用了。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在 HTML 页面添加跨域支持,可以使用以下几种方法: 1. JSONP(JSON with Padding):JSONP 是一种利用 `<script>` 标签实现跨域请求的方法。在 HTML 页面中创建一个带有跨域 URL 的 `<script>` 标签,服务器返回的响应是一段包裹在函数调用中的 JavaScript 代码,该函数会在页面中执行并处理响应数据。 示例代码: ```html <script> function handleResponse(data) { // 处理响应数据 } </script> <script src="http://example.com/api?callback=handleResponse"></script> ``` 2. CORS(Cross-Origin Resource Sharing):CORS 是一种服务器端设置,允许在不同源之间进行跨域请求。在服务器端设置响应头部信息,允许指定的源访问资源。 示例代码: ```javascript // 服务器端代码 response.setHeader('Access-Control-Allow-Origin', 'http://example.com'); ``` 3. 代理服务器:使用代理服务器来转发请求,绕过浏览器的同源策略。在代理服务器上可以设置允许跨域请求,并将请求转发到目标服务器上。 示例代码: ```javascript // 代理服务器代码 app.use('/api', (req, res) => { // 转发请求到目标服务器 }); ``` 请注意,在使用跨域请求时,要确保目标服务器已经设置了允许跨域访问的配置。此外,跨域请求可能会受到浏览器的安全策略限制,例如在某些情况下,跨域请求可能需要进行预检请求(OPTIONS 请求)来检查服务器是否允许该请求。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值