前述：
先了解下什么是跨域，什么是同源
详解跨域请求的两种方式，支持post请求
JS AJAX跨域被阻止 CORS 头缺少 'ACCESS-CONTROL-ALLOW-ORIGIN'（只要代码的看这个，其他的偏理论）
JSONP实现跨域请求 不支持POST!
ajax请求携带cookie和自定义请求头header（跨域和同域）
目录
先了解下什么是跨域，什么是同源
一、详解跨域请求的两种方式，支持post请求
JSONP实现跨域
这个调用实际上的实现原理是
jsonp实现的缺点
服务端设置支持跨域
小结
二、JS AJAX跨域被阻止 CORS 头缺少 'ACCESS-CONTROL-ALLOW-ORIGIN'【只关注代码的看这里】
解决办法1：
解决办法2：
解决办法三：
解决办法四：
三、JSONP实现跨域请求 不支持POST!
jQuery封装JSONP
通过$.getJSON(）
四、ajax请求携带cookie和自定义请求头header（跨域和同域）
ajax请求携带cookie、自定义header总结：
1. ajax跨域请求（无cookie、无header）案例（java）
2. ajax跨域请求获取和创建cookie案例（java）
3. ajax跨域请求，携带请求头header案例（java）
3. jsonp实现跨域读写cookie案例（java）
参考博客：
先了解下什么是跨域，什么是同源
一、详解跨域请求的两种方式，支持post请求
转载：http://www.01happy.com/two-ways-of-cross-domain-request/
原先一直以为要实现跨域请求只能用jsonp，只能支持GET请求，后来了解到使用POST请求也可以实现跨域，但是需要在服务器增加Access-Control-Allow-Origin和Access-Control-Allow-Headers头。下面说明下两个不同的方法实现的方式和原理。
JSONP实现跨域
常用的jquery实现跨域调用
$.ajax({
url: "http://127.0.0.1/~chenjiebin/mycode/php/crossdomain/index.php",
dataType: "jsonp",
jsonp: "callback",
context: document.body,
success: function(data) {
console.log(data);
}
});
核心代码
dataType: "jsonp", jsonp: "callback",
这个调用实际上的实现原理是
在网页中构造一个script标签，将src设置为对应的url，并增加上相应的callback参数，形如如下格式：
请求的服务端代码如下：
$data = json_encode(array("id" => "1", "name" => "tom"));
$callback = $_GET["callback"];
echo $callback . "(" . $data . ")";
实际上最后返回的内容就是一段js代码：
jQuery211018970995225637144_1465350372062({"id":"1","name":"tom"})
当浏览器获取到该段js代码后就会执行这个函数，从而实现回调ajax请求时设置的success方法。
jsonp实现的缺点
了解了原理后，就知道jsonp实现的跨域方式不支持post请求，只能支持get请求。但是如果需要支持post请求该怎么办呢？下面谈下服务器端设置的方式。
服务端设置支持跨域
主要是Access-Control-Allow-Origin头参数，该参数用来指定允许哪个来源的域请求。服务端代码如下：
// 表示支持所有来源的域进行请求
// 实际在操作过程中可以设置为指定域
header('Access-Control-Allow-Origin:*');
$data = json_encode(array("id" => "1", "name" => "tom"));
echo $data;
对应的js代码：
$.ajax({
type: "POST",
url: "http://127.0.0.1/~chenjiebin/mycode/php/crossdomain/header.php",
dataType: "json",
success: function(data) {
console.log(data);
}
});
可以支持post请求。
小结
实际上个人并不是特别喜欢用跨域请求的方式，可能会带来一些不可预见的安全问题。比较习惯的方式通过本域下的服务端和跨域的源服务器进行交互。
二、JS AJAX跨域被阻止 CORS 头缺少 'ACCESS-CONTROL-ALLOW-ORIGIN'【只关注代码的看这里】
转载：
https://www.cnblogs.com/duoshou/articles/8275435.html
今天ajax请求域名的时候出现
已阻止跨源请求：同源策略禁止读取位于 http://www.zuimeimami.com*****的远程资源。（原因：CORS 头缺少 'Access-Control-Allow-Origin'）。
解决办法1：
var url='http://localhost:8080/WorkGroupManagment/open/getGroupById"
+"?id=1&callback=?';
$.ajax({
url:url,
dataType:'jsonp',
processData: false,
type:'get',
success:function(data){
alert(data.name);
},
error:function(XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
}});
划重点
url携带：callback=?
请求时要： dataType:'jsonp'
并且只支持： type:'get'
解决办法2：
var url="http://localhost:8080/WorkGroupManagment/open/getGroupById"
+"?id=1&callback=?";
$.jsonp({
"url": url,
"success": function(data) {
$("#current-group").text("当前工作组:"+data.result.name);
},
"error": function(d,msg) {
alert("Could not find user "+msg);
}
});
划重点
url携带：callback=?
请求时用： $.jsonp(）
我没有测试过， 不知道源作者测试过没
解决办法三：
被请求页面加上下面代码，最好content填写域名
解决办法四：
在请求控制器加上
header("Access-Control-Allow-Origin: *");
三、JSONP实现跨域请求 不支持POST!
转载：
https://blog.csdn.net/u010200636/article/details/83060249
JSONP 是 JSON with padding（填充式 JSON 或参数式 JSON）的简写。
JSONP实现跨域请求的原理简单的说，就是动态创建