前言
前几天，有个朋友问我跨域的问题，寻思着找篇文章给他理解。找了半天都没有直中要害，个人认为都是理解的模棱两可，所以花时间把自己的对ajax跨域的理解写下来。
什么是跨域？
假设我访问a 站点，在a站点得到一个页面，在a 站点的这个页面想去访问b 站点的资源，这个是就会产生一个跨域的效果。由于浏览器是有安全限制的，所以a 站点无法访问到b站点的资源。
比如我现在访问 www.1.com 获取到一个页面.通过这个页面去访问www.2.com获取资源。就会产生跨域。
问题展现
接口我用的是聚合数据，有接口调用次数限制，如若接口调用有问题，请自行申请接口。
1、创建一个ajaxDemo_1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax</title>
</head>
<body>
这是一个有跨域问题的页面
<script src="./jquery.min.js"></script>
<script type="text/javascript">
$.ajax({
type: "get",
cache: false,
url: 'http://apis.juhe.cn/oil/region?key=1b9411b68adda384780872fabcafc16d&city=%e5%8c%97%e4%ba%ac',
dataType: "json",
success: function(result) {
console.log(JSON.stringify(result));
},
error: function(err) {
console.log('err10: ');
console.log(err);
}
});
</script>
</body>
</html>
2、将ajaxDemo_1.html放到本地node.js服务器上运行
如何解决？
1、jsonp（只能解决get请求跨域问题）
创建一个ajaxDemo_2.html 发起get请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajaxDemo_2</title>
</head>
<body>
这是一个用jsonp解决get请求跨域问题的页面
<script src="./jquery.min.js"></script>
<script type="text/javascript">
$.ajax({
type: "get",
cache: false,
url: 'http://apis.juhe.cn/oil/region?key=1b9411b68adda384780872fabcafc16d&city=%e8%a1%a1%e9%98%b3',
dataType: "jsonp",
success: function(result) {
console.log(JSON.stringify(result));
},
error: function(err) {
console.log('err10: ');
console.log(err);
}
});
</script>
</body>
</html>
ajax使用script元素发送jsonp请求
使用<script>元素进行ajax传输的原因：
1、它不受同源策略的影响，因此可以使用它们从其他服务器请求数据。
2、包含JSON编码数据的响应体会自动解码（即执行）。
结论：当通过<script>元素调用数据时，响应内容必须用js函数名和圆括号包裹起来，而不是发送一段json数据。而且通过<script>元素只能加载get请求而不能加载post请求
2、cors（跨域资源共享 Cross-Origin Resource Sharing）
通过cors使跨域问题在get请求和post请求都可以解决
2.1、cors原理
CORS定义一种跨域访问的机制，可以让AJAX实现跨域访问。CORS 允许一个域上的网络应用向另一个域提交跨域 AJAX 请求。实现此功能非常简单，只需由服务器发送一个响应标头即可
2.2CORS浏览器支持情况
喜闻乐见、普大喜奔的支持情况，尤其是在移动终端上，除了opera Mini；
PC上的现代浏览器都能友好的支持，除了IE9-，不过前端工程师对这种情况早应该习惯了...
2.3 应用
假设我们页面或者应用已在 http://www.test1.com 上了，而我们打算从 http://www.test2.com 请求提取数据。一般情况下，如果我们直接使用 AJAX 来请求将会失败，浏览器也会返回“源不匹配”的错误，"跨域"也就以此由来。
利用 CORS，http://www.test2.com 只需添加一个标头，就可以允许来自 http://www.test1.com 的请求，下图是我在服务器返回中的 header() 设置，“＊”号表示允许任何域向我们的服务端提交请求：
也可以设置指定的域名，如域名 http://www.test2.com ，那么就允许来自这个域名的请求：
当前我设置的header为“＊”，任意一个请求过来之后服务端我们都可以进行处理&响应，那么在调试工具中可以看到其头信息设置，其中见红框中有一项信息是“Access-Control-Allow-Origin：* ”，表示我们已经启用CORS。
示例代码
https://github.com/yangxiaopingios/AjaxDemo
