什么是跨域？
协议 域名 端口号有一个不一样就是跨域
跨域：跨域访问，简单来说就是 A 网站的 javascript 代码试图访问 B 网站，包括提交内容和获取内容。由于安全原因，跨域访问是被各大浏览器所默认禁止的，XmlHttpRequest也不例外。
如果两个页面拥有相同的协议（protocol），端口（如果指定），和主机，那么这两个页面就属于同一个源（origin），JavaScript 允许这种同源页面的数据互相通信。
端口和协议，一般生产项目中WEB页面是「看不见」端口号的，其实是缺省端口80，目前网络劫持盛行，因此流行使用安全协议HTTPS来避免劫持
|
URL
|
说明
|
是否允许通信
|
|
|
同一域名下
|
允许
|
|
|
同一域名下不同文件夹
|
允许
|
|
|
同一域名，不同端口
看不见的端口号是缺省端口80，
|
不允许
|
|
|
同一域名，不同协议
|
不允许
|
|
|
域名和域名对应ip
|
不允许
|
|
|
主域相同，子域不同
|
不允许
|
|
|
同一域名，不同二级域名（同上）
|
不允许（cookie这种情况下也不允许访问）
|
|
|
不同域名
|
不允许
|
特别注意两点：
第一，如果是协议和端口造成的跨域问题“前台”是无能为力的，
第二：在跨域问题上，域仅仅是通过“URL的首部”来识别 而不会去判断相同的ip地址对应着两个域或两个域是否在同一个ip上。
“URL的首部”指window.location.protocol +window.location.host，也可以理解为“Domains, protocols and ports must match”。
那么怎么实现跨域请求呢：通过Jsonp和服务器：
- 为了便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP，该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了
1_1.通过 jsonp 原始方式跨域请求（方式一）： (不会自动创建回调函数)
function getData() {
//jsonp ：通过创建动态script元素访问服务器，把回调函数名作为查询参数传递给服务器；
//服务器请求到数据以后把数据放入到回调函数中返回
var script
= document.
createElement(
‘script‘) ;
var wyUrl
= ‘http://c.m.163.com/nc/article/headline/T1348647853363/0-20.html‘;
script.src
=‘http://localhost:9000?myUrl=‘+wyUrl
+‘&callback=callBackFun1‘;
document.documentElement.
appendChild(script);
}
function callBackFun1(
data) {
console.
log(JSON.
parse(
data));
}
1_2.通过 jsonp原始方式跨域请求（方式二）：
2_1.通过 jQuery的ajax中的 jsonp 方法 跨域请求：（get请求）(会自动创建回调函数)
function getData() {
var wyUrl = ‘http://c.m.163.com/nc/article/headline/T1348647853363/0-10.html‘;
var url = ‘http://localhost:9000?myUrl=‘+wyUrl;
//ajax请求不用写回调函数，内部自动创建回调函数，名字随机，每次不一样
$.ajax({
url: url,
type: ‘get’,
//不写时，默认为get方法
dataType: ‘jsonp‘,
success: function (data) {
console.log(JSON.parse(data));
},
error: function (e) {
console.log(e);
}
})
}
2_2.通过 jQuery的ajax中的 jsonp 方法 跨域请求：（post请求）(会自动创建回调函数)
注意：ajax的post方法不会自动将传输的数据转化为JSON.stringfy格式：所以如果需要，得自己转换一下再传输
JSON.stringify( {wyUrl: ‘http://c.m.163.com/nc/article/headline/T1348647853363/0-10.html‘} ),
//ajax请求不用写回调函数，内部自动创建回调函数，名字随机，每次不一样
$.ajax({
url: ‘http://localhost:9999‘,
method: ‘post‘,
dataType: ‘jsonp‘,
headers: {‘Content-Type‘: ‘application/x-www-form-urlencoded‘},
data: {myUrl: ‘http://c.m.163.com/nc/article/headline/T1348647853363/0-10.html‘,randomNum:55},
success: function (data) {
console.log(JSON.parse(data));
},
拓展：
3_1.通过 angular 的 $http() 中 jsonp 方法 跨域请求： (回调函数是固定写法)
注意：angular里面的callback 必须为：JSON_CALLBACK
原理： jsonp利用的是script可以访问外部信息的原理发送请求并且利用jsonp协议进行数据交互
.controller(
‘myController‘, [
‘$scope‘,
‘$http‘,
function (
$scope,
$http) {
var wyUrl
= ‘http://c.m.163.com/nc/article/headline/T1348647853363/0-10.html‘;
$scope.mine
= {
getData: function () {
$http({
method
: ‘jsonp‘,
url
: ‘http://localhost:9000?myUrl=‘+ wyUrl
+‘&callback=JSON_CALLBACK‘
}).
then(
function success(
result) {
console.
log(
result);
},
function error(
e) {
console.
log(
e);
});
}
};
}])
3_2.通过 angular 的 $http() 中 post 方法 跨域请求：
注意：angular的post方法会自动将传输的数据转化为JSON.stringfy格式：
原理：post设置请求头跳过预请求来实现跨域
总结：
- 代理实现最麻烦，但使用最广泛，任何支持AJAX的浏览器都可以使用这种方式。
