跨域

什么是跨域？

    发起请求的域名地址和要请求的目标地址不在同一域名下

何时使用跨域？

    1、自己的应用程序要请求别人网站上的数据，例如：股票，天气等

    2、当项目太大，前端和后端的应用程序也分属于不同域名之下

    3、自己公司的多个系统互相请求数据

存在的问题：    xhr ajax请求不允许跨域

怎样才算跨域？

    1、同一域名，不同端口，案例：

http://www.domain.com:8000/a.js
http://www.domain.com/b.js

    2、同一域名，不同协议，案例：

http://www.domain.com/a.js
http://www.domain.com/b.js
本质端口不同

    3、域名和域名对应相同ip，案例：

http://www.domain.com/a.js
http://192.168.4.12/b.js
即使统一主机的IP和域名之间相互访问

    4、主语相同，子域不同，案例：

http://www.domain.com/a.js
http://x.domain.com/b.js

    5、主域不同

没跨域所出的错

    No 'Access-Control-Allow-Origin'

    非同源，不允许访问

如何解决

    除了xhr处，有很多元素/属性可以跨域

    比如：img src    script的src    link的href

方案：

    JSONP(JSON with padding填充式JSON)方式跨域(通过script的src进行请求)

方式一：

    客户端：不要使用xhr，使用script请求PHP

<script src="http://localhost/weather.php"></script>

    服务器端：不只返回数据，而是将数据填充在一段js代码中返回(将PHP语句填充成JS语句发送给客户端)  

<?php
$weather = "晴 5~48";
echo "document.write('<h1>".$weather."</h1>')";

    问题：服务端返回的语句是固定的，客户端无法灵活改变

解决：

方式二：

    客户端：定义一个接收参数的函数，使用script请求PHP 

 <script>
  function show(data){
     document.write(`<h1>${data}</h1>`);
  }
  </script>
 <script src="http://172.163.7.181/weather.php"></script>

    服务器端：只返回一条函数调用的语句，且函数名与客户端函数名保持一致

<?php
$weather = "晴天 5~80度";
echo "show('".$weather."')";

    问题：函数名必须和服务端统一

解决：

方式三：

    客户端：定义一个接收参数的函数，用script请求PHP，携带一个参数callback，值为函数名

  <script>
  function display(data){
     document.write(`<h1>${data}</h1>`);
  }
  </script>
 <script src="http://172.163.7.181/weather.php?callback=display"></script>

    服务器端：从请求中获得callback参数名(函数名)，将函数名和数据拼接位一条调用JS语句

<?php
@$callback = $_REQUEST["callback"];
$weather = "*";
echo "$callback('".$weather."')";

    问题：只能在页面加载时运行，无法自行选择触发时间

解决：

方式四：

    客户端：动态创建script添加到页面，用完自动删除script

  <script>
  function display(data){
     alert(data);
     $("script:last").remove();
  }
  $("#btnWeather").click(function(){
  $(`<script src="http://172.163.7.181/weather.php?callback=display"><\/script>`).appendTo(document.body);
  });
  </script>

    服务器端：从请求中获得callback参数值(函数名)，将函数名和数据拼接位一条调用的JS语句

<?php
@$callback = $_REQUEST["callback"];
$weather = "*";
echo "$callback('".$weather."')";

    $.ajax支持JSONP

        加入dataType:"jsonp"

        几乎所有项目AJAX中都需要dataType:"jsonp"

        原理：调用时随机自动生成函数名，并自动在head中添加script将函数名作为值进行传递，调用接收后自动消失

 $.ajax({
  type:"get",
  url:"http://127.0.0.1/weather.php",
  dataType:"jsonp",
  //127.0.0.1 "http://localhost/weather.php" 172.163.7.181
  success:function(data){
     document.write(`<h1>${data}</h1>`);
  }
 })

2、服务端跨域

    修改响应头，允许添加跨域的地址

    header("Access-Control-Allow-Origin:*/请求发来的地址");    允许一切

    使用较少，比较危险