跨域及解决方案

跨域

什么是跨域

当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头

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

   .htaccess文件，这里设置允许所有请求

   RewriteEngine on
   Header set Access-Control-Allow-Origin "*"
   

   data.json文件

   {
     "data":{
       "name":"vicer",
       "age":18
     }
   }
   

2. 跨域请求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的数据