初始跨域

最新推荐文章于 2024-11-29 14:17:21 发布

原创最新推荐文章于 2024-11-29 14:17:21 发布 · 99 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了浏览器的同源策略，解释了其对于安全的重要性，并提供了多种跨域请求数据的方法，包括JSONP、使用iframe和window对象的技巧、第三方插件以及利用script标签的src属性。

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

同源策略：
1.是指浏览器的一种安全策略，所谓的同源是指请求的url地址中的协议、域名、端口都相同只要其中之一不相同就是跨域。
2.同源策略主要是为了保证浏览器的安全性
3.在同源策略下，浏览器不允许ajax跨域获取服务器数据
但是跨域请求只能使用个体请求方式，目前提供get跨域请求
为了解决ajax不能跨域的问题，我们有如下方法：
1.jsonp：实现ajax跨域请求数据
2.document.hash+iframe
3.window.name+iframe
4.window.postMessage
5.第三方插件解决跨域flash
跨域请求数据的方法
静态的script标签的src属性进行跨域请求数据

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <script src="http://tom.com/data.php" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
   console.log(data);
   console.log(data.name);
   console.log(data.pwd);
  </script>
 </head>
 <body>
 </body>
</html>

php代码

<?php
 $arr=array('name'=>'zhangsan','pwd'=>'123456');
 $cb=$_GET['_cb'];
 $name=$_GET['name'];
 $pwd=$_GET['pwd'];
 echo $cb.'({"username":"'.$name.'","pwd":"'.$pwd.'"})';
?>

动态创建的script标签的src属性进行跨域请求数据

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript" async>
   var script=document.createElement('script');
   script.src='http://tom.com/data.php';
   var head=document.getElementsByTagName('head')[0];
   head.appendChild(script);
   function foo(data){
    console.log(data);
   }
  </script>
 </head>
 <body>
 </body>
</html>

php代码

<?php
 $arr=array('name'=>'zhangsan','pwd'=>'123456');
 $cb=$_GET['_cb'];
 $name=$_GET['name'];
 $pwd=$_GET['pwd'];
 echo $cb.'({"username":"'.$name.'","pwd":"'.$pwd.'"})';
?>

jsonp与jQuery的使用
html页面

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <script src="jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
   $(function(){
    $('#btn').click(function(){
     $.ajax({
      type:"get",
      url:"http://tom.com/jsonp.php",
      dataType:'jsonp',  // 实现跨域请求
      //callback=jQuery21109469809573287793_1564657482777({"username":"lisi","pwd":"123"})
      jsonp:'cb',// 
      // jsonp属性的作用就是自定义参数名字(callback=abc),这里的名字cb指的是等号的前面的
      // 后端根据这个键 获取方法名, jquery的默认参数名称是callback
      jsonpCallback:'abc',//  改变默认的回调函数的名称 ==>abc
      success:function(data){
       console.log(data);
      },
      error:function(){
       console.log('error');
      }
    })
    })
   })
  </script>
 </head>
 <body>
  <input type="button" value="点击" id="btn" />
 </body>
</html>

php代码

<?php
 $arr=array("username"=>"lisi","pwd"=>"123");
 $cb=$_GET['cb'];
 echo $cb.'('.json_encode($arr).')';
?>