什么是跨域以及跨域解决方法

本文详细解释了跨域的概念,即请求URL与当前页面URL在协议、域名或端口上存在差异时产生的问题,并提供了三种解决跨域的方法:设置header头、使用jsonp以及对比json与jsonp格式区别。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、什么是跨域

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

当前页面url

被请求页面url

是否跨域

原因

http://www.test.com

http://www.test.com/a.html

同源(协议、域名、端口号相同)

http://www.test.com

https://www.test.com/a.html

跨域

协议不同(http/https)

http://www.test.com

http://www.baidu.com/

跨域

主域名不同(test/baidu)

http://www.test.com

http://a.test.com/

跨域

子域名不同(www/blog)

http://www.test.com:8080

http://www.test.com:1234/

跨域

端口号不同(8080/7001)

 

二、跨域解决方法

出于安全的考虑,浏览器允许跨域写,而不允许跨域读

(1)法一:设置header头

header("Access-Control-Allow-Origin: *"); (在该方法最开始处加上)

访问控制允许同源",这是由于ajax跨域访问引起的

(2)法二:jsonp (ajax跨域)

如:

  $(document).ready(function(){

   var url='http://localhost:8080/WorkGroupManagment/open/getGroupById"

       +"?id=1&callback=?';

   $.ajax({

     url:url,

     dataType:'jsonp',

     processData: false,

     type:'get',

     success:function(data){

       alert(data.name);

     },

     error:function(XMLHttpRequest, textStatus, errorThrown) {

       alert(XMLHttpRequest.status);

       alert(XMLHttpRequest.readyState);

       alert(textStatus);

     }});

   });

3)比较一下json与jsonp格式的区别:

json格式:

{

    "message":"获取成功",

    "state":"1",

    "result":{"name":"工作组1","id":1,"description":"11"}

}

jsonp格式:

callback({

    "message":"获取成功",

    "state":"1",

    "result":{"name":"工作组1","id":1,"description":"11"}

})

jsonp比json外面有多了一层,callback()。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值