AJAX跨域解决方案

跨域方法：
1、跨子域iframe
2、JSONP
缺点：只支持get方法；后端代码要调整
3、CORS
本地如何模拟跨域
修改本机的hosts文件

127.0.0.1 a.test.com
127.0.0.1 b.test.com

跨子域解决方案
如果在a.test.com访问b.test.com的接口，ajax是不允许的，iframe可以实现效 果。
通过iframe的协助允许跨子域请求
操作：提升域-document.domain="test.com"

JSONP解决方案
HTML种，所有带src属性的标签可以跨域，script/img/iframe。所以，可以通过script加载其他域的一段动态脚本，这段脚本包含了想要的数据信息。
方法一，前后端约定好，callback函数名是handler

//创建script标签
//url为http发请求地址
var url="http://localhost:8080/xxx.do";
//过 script 标签加载数据的方式去获取数据当做 JS 代码来执行
function createScriptElement(){
   var script = document.createElement('script');
   script.setAttribute('src', url+"?callback=handler");
   document.querySelector("head").appendChild(script);
}
//提前在页面上声明一个函数
function handler(data){
   alert(data);
}
/*http://localhost:8080/xxx.do?callback=handler这个请求到达后端后，
后端会去解析callback这个参数获取到字符串handler，请求的返回数据做如下处理
之前后端返回数据： {"xxx": "xxx", "yyy": "yyy"}
现在后端返回数据： handler({"xxx": "xxx", "yyy": "yyy"})
前端script标签在加载数据后会把 handler({"xxx": "xxx", "yyy": "yyy"})做为 js 来执行，
这实际上就是调用handler这个函数，同时参数是 {"xxx": "xxx", "yyy": "yyy"}
用户只需要在加载提前在页面定义好handler这个全局函数，在函数内部处理参数即可
*/

方法二，前后端无需约定callback函数名

function jsonp(url,data,callback){
   var script=document.createElement('script');
   document.body.appendChild(script);
   data=data||{};
   data.callback='cb'+new Date().getTime();//匿名函数别名
   window[data.callback]=callback;
    url+='?'+$.param(data);

    script.src=url;
    script.onload=function(){
       document.body.removeChild(script);
    }
}
//后端的处理方式
res.setHeader('Content-type','application/javascript');
res.send(req.query.callback+'('+JSON.stringify({a:1,b:2})+')');

方法三，使用jquery的封装方法

$.getJSON('http://b.test.com/testjsonp2?callback=?',
{test:'ok'},function(){});

$.ajax('http://b.test.com/testjsonp2?callback=?',
{dataType:'jsonp'}).done(function(){});

$.ajax('http://b.test.com/testjsonp2',
{dataType:'jsonp',jsonp:'cbname',jsonpCallback:'cbfun'},
success:function(){})

CORS解决方案
CORS 全称是跨域资源共享（Cross-Origin Resource Sharing），是一种 ajax 跨域请求资源的方式，支持现代浏览器，IE支持10以上。

支持xhr，level2标准的浏览器
为了跨域安全，需要在服务器响应头部提供一些信息，供浏览器校验请求是否被允许。
Access-Control-Allow-Orgin
Access-Control-Allow-Method
Access-Control-Allow-Headers
实现方式很简单：跨源资源共享(CORS)是通过客户端+服务端协作声明的方式来确保请求安全的。
客户端

/*当你使用 XMLHttpRequest 发送请求时，
浏览器发现该请求不符合同源策略，会给该请求加一个请求头：Origin*/
    var xhr = new XMLHttpRequest();
    xhr.open("post", "http://b.example.com/Test.ashx", true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");　　　
    // 声明请求源
    xhr.setRequestHeader("Origin", "http://a.example.com");
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var responseText = xhr.responseText;
            console.info(responseText);
        }
    }
    xhr.send();

服务器端

//如果确定接受请求则在返回结果中加入一个响应头：Access-Control-Allow-Origin
context.Response.ContentType = "text/plain";
// 声明接受所有域的请求
context.Response.AddHeader("Access-Control-Allow-Origin", "*");
context.Response.Write("Hello World");

览器判断该相应头中是否包含 Origin 的值，如果有则浏览器会处理响应，我们就可以拿到响应数据，如果不包含浏览器直接驳回，这时我们无法拿到响应数据。

1、JSONP只能实现GET请求，而CORS支持所有类型的HTTP请求。
2、使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理。
3、JSONP主要被老的浏览器支持，它们往往不支持CORS，而绝大多数现代浏览器都已经支持了CORS。