• 微信扫码关注公众号 :前端前端大前端,追求更精致的阅读体验 ,一起来学习啊
  • 关注后发送关键资料,免费获取一整套前端系统学习资料和老男孩python系列课程
    跨域方案简单介绍_jquery+ajax


文章目录

跨域解决方案

  • 关于跨域解决方案很多,之前在简书上看到过10种的,方法大同小异,也有的比较偏
  • 在这里我介绍两种
  • jsonp(最常用,推荐)
  • cors(了解就好)

jsonp跨域(jquery版)

  • 本质对script.src跨域进行了封装
  • 可以看看我的其他博客文章,ajax跨域与第三方数据接口的对接(大部分第三方接口都支持jsonp)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>


$.ajax({
url:"http://www.baidu.com",//请求url
data:{}, //请求参数
async:true,//是否异步,肯定是啊,同步的ajax没有灵魂,默认就是true
dataType:"jsonp",//划重点
type:"get",//请求方式,默认也是get
success:function(){//回调函数
//获取异步处理结果,只能通过回调函数,没有return,玩过node.js的应该深有体会

}

})
</script>

</body>
</html>

不设置jsonp的情况

跨域方案简单介绍_ajax跨域解决方案_02

返回结果

跨域方案简单介绍_json_03

cors

以php为例,服务端设置
header('Access-Control-Allow-Origin: *');
表示允许跨域
这个一般在内部使用(如公司数据放在不同服务器上),或者自己跑全栈测试用