关于跨域的问题（面试）

1. 什么是跨域
- 不同域名之间进行访问。
- 跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制

同源策略？

所谓同源是指域名，协议，端口均相同。
例子如下

http://www.123.com/index.html 调用 http://www.123.com/server.php （非跨域）
http://www.123.com/index.html 调用 http://www.456.com/server.php （主域名不同:123/456，跨域）
http://abc.123.com/index.html 调用 http://def.123.com/server.php （子域名不同:abc/def，跨域）
http://www.123.com:8080/index.html 调用http://www.123.com:8081/server.php （端口不同:8080/8081，跨域）
http://www.123.com/index.html 调用 https://www.123.com/server.php （协议不同:http/https，跨域）

请注意：localhost和127.0.0.1虽然都指向本机，但也属于跨域。
浏览器执行javascript脚本时，会检查这个脚本属于哪个页面，如果不是同源页面，就不会被执行。

1. 是谁造成了跨域？
  浏览器造成的跨域
1. 为什么会有跨域？
  为了数据的安全
1. 在开发中，你是如何解决跨域的问题？
- jsonp解决跨域
- 往浏览器当中安装插件
1. jsonp与Ajax有关系吗
- 没有。
- Ajax是JavaScript提供的方法。用于请求数据，当跨域的时候，拿不到数据。
- jsonp是解决跨域的方案
1. jsonp原理是怎么实现的
- 借助标签的src属性进行数据请求
- 使用src,请求数据
- 在本地声明一个方法
- 要在服务端处理跨域
1. jsonp的原理1（原生的方式）

在本地声明一个方法

<script>
    function fn() {
        alert("执行了前端的alert方法")
    }
</script>

使用src,请求数据

<script src="06-jsonp.php"></script>

要在服务端处理跨域

echo "fn()";

该方法能够解决跨域的问题，但是方法被写死不灵活。下面的方法将函数名传递过去。

9. jsonp的原理1（原生的改进）

在本地声明一个方法

<script>
    function wmx() {
        alert("wmx函数执行了前端的alert方法")
    }
</script>

使用src,请求数据

//将函数名作为参数传递过去
<script src="07-jsonp.php?callback=wmx"></script>

要在服务端处理跨域

$res = $_GET['callback'];
//使用点进行连接
echo $res."()";

10.jsonp的原理1（原生：实现服务端返回数据给前端）

在本地声明一个方法

<script>
    function wmx(args) {
        alert(args)
    }
</script>

使用src,请求数据

//将函数名作为参数传递过去
<script src="07-jsonp.php?callback=wmx"></script>

要在服务端处理跨域

$res = $_GET['callback'];
//使用点进行连接
echo $res."('这是服务端返回的数据')";

演示跨域的实现1（使用jsonp的方法解决跨域）
- 借用豆瓣API模拟
  https://api.douban.com/v2/book/1220562
- 具体实现
  在本地声明一个方法

<script>
    function wmx(args) {
       alert(args);
        console.log(args);
    }
</script>

使用src,请求数据

//豆瓣API可接受callback参数，使返回的数据为jsonp。
//callback只能包含数字、字母、下划线，长度不大于50
<script src="https://api.douban.com/v2/book/1220562?callback=wmx"></script>

演示跨域的实现2（AngularJS中处理跨域：封装原生jsonp）
- 在不同的域内新建一个文件，地址为
  http://localhost/mine/09.php
- 具体实现
  使用angularJS实现跨域（原理：jsonp）
  核心代码：（必须按照严格来写，不能写错）
  method:'jsonp',
  params:{
  callback:"JSON_CALLBACK"
  }

<body ng-app="app" ng-controller="wmxController">

<p>{{data}}</p>

<script src="angular.js"></script>

<script>

   var app = angular.module('app',[]);

   app.controller('wmxController',['$scope','$http',function ($scope,$http) {
       $http({m
           url:'http://localhost/mine/09.php',
           method:'jsonp',
           params:{
               callback:"JSON_CALLBACK"
           }
       }).success(function (res) {
           $scope.data = res;
           console.log($scope.data);
       }).error(function (e) {

       })
   }])
</script>

后台的数据

$res = $_GET['callback'];
echo $res."('我是跨域获取后的数据啦啦啦')";

内部实现的原理：
- 帮你创建了一个script标签 src=url
- 创建声明了一个
function angular.callbacks._0(args){args}
- 服务器接收

关于跨域的问题（面试）

推荐阅读更多精彩内容