跨域及解决方案

跨域

什么是跨域

当HTTP请求中的协议、域名、端口号任意一个不相同时，就在不同的域

在不同的域之间请求数据或资源，就叫"跨域"

它用于限制一个页面通过脚本访问另外一个页面的敏感数据，减少可能被攻击的媒介

跨域情况列举

协议

http与https不同
域名

http://www.test.com与http://www.code.com不同
端口

http://www.test.com:80与http://www.test.com:3000不同
二级域名

http://ttt.test.com与http://aaa.test.com不同
域名与对应IP

localhost与127.0.0.1不同

为什么域名对应IP会跨域：因为一个IP地址可以绑定多个域名，为了防止出错，所以也会跨域阻止访问

解决跨域方法

一、后台使用nginx配置反向代理

二、使用jsonp，缺点，jsonp只能使用GET请求

//jsonp.html
<script src="jquery.js"></script>
<script>
  $.ajax({
    url: "http://127.0.0.1:8000/JsoupData.js",
    type: "GET",
    jsonp: 'jsoncallback', //这个可以加也可以不加
    dataType: 'jsonp',
    //设置的jsonp回调函数名称，并把回调函数中数据取出来供success属性方法调用。如果没有设置jsonpCallback则继续调用原来的回调函数。默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
    //jsonpCallback:"flightHandler",			
    success: function (data) {
      console.log(data);		//如果没有写jsonpCallback，则success并不会回调，只会调用err返回请求状态
    },
    error: function (err) {
      console.info(err);		
    }
  });

  function myCallBack(data) { //jsonp执行成功的时候回调这个函数，所以success函数形同虚设了。
    console.log("myCallBack");
    console.log(data);
  }
</script>

//JsoupData.js
var data = {
name: 'vicer',
age: 18
}

myCallBack(data);

请求时我们请求http://localhost:8000/jsonp.html，根据跨域举例最后一条，IP与对应域名请求会造成跨域。

但使用jsonp请求后发现可以正常调用myCallBack函数，请求成功。

三、在服务端增加CORS头

首先我们创建一个文件夹，我们命名header，文件夹内放入请求的数据和.htaccess伪静态

.htaccess文件，这里设置允许所有请求
```
RewriteEngine on
Header set Access-Control-Allow-Origin "*"
```
data.json文件
```
{
  "data":{
    "name":"vicer",
    "age":18
  }
}
```

跨域请求json文件

//cors.html
<script src="jquery.js"></script>
<script>
  $.ajax({
    url: "http://127.0.0.1:8000/header/data.json",
    type: "GET",
    success: function (data) {
      console.log(data);
    },
    error: function (err) {
      console.log(err);
    }
  });
</script>

接下来我们跨域请求http://localhost:8000/cors.html。

当我们配置好.htaccess文件后会自动应用到当前文件夹，成功打印出data.json的数据