跨域ajax 功能,最新 ajax 跨域原理及解决方式详解

前言

前几天，有个朋友问我跨域的问题，寻思着找篇文章给他理解。找了半天都没有直中要害，个人认为都是理解的模棱两可，所以花时间把自己的对ajax跨域的理解写下来。

什么是跨域？

假设我访问a 站点，在a站点得到一个页面，在a 站点的这个页面想去访问b 站点的资源，这个是就会产生一个跨域的效果。由于浏览器是有安全限制的，所以a 站点无法访问到b站点的资源。

比如我现在访问 www.1.com 获取到一个页面.通过这个页面去访问www.2.com获取资源。就会产生跨域。

问题展现

接口我用的是聚合数据，有接口调用次数限制，如若接口调用有问题，请自行申请接口。

1、创建一个ajaxDemo_1.html

ajax

这是一个有跨域问题的页面

$.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);

}

});

2、将ajaxDemo_1.html放到本地node.js服务器上运行

由于跨域问题产生的错误

ajax底层请求类型为XMLHttpRequest

如何解决？

1、jsonp(只能解决get请求跨域问题)

创建一个ajaxDemo_2.html 发起get请求

ajaxDemo_2

这是一个用jsonp解决get请求跨域问题的页面

$.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);

}

});

运行后没有跨域问题，可以正常请求到数据

ajax底层请求类型为script

ajax使用script元素发送jsonp请求

使用元素进行ajax传输的原因：

1、它不受同源策略的影响，因此可以使用它们从其他服务器请求数据。

2、包含JSON编码数据的响应体会自动解码(即执行)。

结论：当通过元素调用数据时，响应内容必须用js函数名和圆括号包裹起来，而不是发送一段json数据。而且通过元素只能加载get请求而不能加载post请求

2、cors(跨域资源共享 Cross-Origin Resource Sharing)

通过cors使跨域问题在get请求和post请求都可以解决

2.1、cors原理

CORS定义一种跨域访问的机制，可以让AJAX实现跨域访问。CORS 允许一个域上的网络应用向另一个域提交跨域 AJAX 请求。实现此功能非常简单，只需由服务器发送一个响应标头即可

2.2CORS浏览器支持情况

CORS浏览器支持情况图解

CORS浏览器支持情况描述

喜闻乐见、普大喜奔的支持情况，尤其是在移动终端上，除了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。

cors示例

示例代码

参考资料