本文共 2126 字，大约阅读时间需要 7 分钟。

Ajax受同源策略的限制，既然有问题,那么肯定就会去想怎么解决这个同源策略!

跨域问题：来源于JavaScript的‘同源策略’，即只有 协议 + 主机名 + 端口号 相同，那么在浏览器之间就可以去访问你想要的数据。就是说JavaScript只能访问和操作自己域下的资源，不能访问和操作其他域下的资源。跨域问题是针对JS和ajax的，html本身没有跨域问题。

处理跨域的方式

1. Flash
2. 服务器代理中转
3. jsonp
4. document.donmain(针对基础域名相同的情况)

jsonp原理

1.Web页面上用< script > 引入 js文件时则不受是否跨域的影响 （不仅如此，我们还发现凡是拥有"src"这个属性的标签都拥有跨域的能力，比如< script >、< img >、< iframe >）

2.于是我们把数据放到服务器上，并且数据为json形式（因为js可以轻松处理json数据）

3.因为我们无法监控通过标签< script >的src属性是否把数据获取完成，所以我们需要做一个处理 (动态去创建一个src标签,然后这个加载是异步的,我们无法知道什么时候这个加载完成,也就不能去调用这个数据，所以就去利用

这个回调函数callback)

4.实现定义好处理跨域获取数据的函数，如 function doJSON（data）{}。

5.用src获取数据的时候添加一个参数cb=‘doJSON’ (服务端会根据参数cb的值返回 对应的内容) 此内容为以cb对应的值doJSON为函数真实要传递的数据为函数的参数的一串字符 如 doJSON（’数据’）

截图：

这里的代码就是按照上面的执行顺序,也就是为什么实现这个效果的，url地址就是你功能实现的接口，我找到的是百度搜索框的接口，后面比较重要的就是cb，一般就是你这个callback函数的名称,wd就是word，你搜索的关键字,基本的跨域就可以实现了，下面看图:

我们看看这个接口:也就是jsonp数据形式 比较一下json与jsonp格式的区别： json格式:

{
       "message":"获取成功",    "state":"1",    "result":{
   "name":"工作组1","id":1,"description":"11"}}

jsonp格式：

callback({    "message":"获取成功",    "state":"1",    "result":{"name":"工作组1","id":1,"description":"11"}})

注意：jquery不支持post方式跨域的

当我们正常地请求一个JSON数据的时候，服务端返回的是一串JSON类型的数据，而我们使用JSONP模式来请求数据的时候服务端返回的是一段可执行的JavaScript代码。因为jsonp跨域的原理就是用的动态加载< script >的src ，所以我们只能把参数通过url的方式传递,所以jsonp的 type类型只能是get ！

那么jQuery怎么实现呢

$.ajax({
       url: 'http://192.168.10.46/demo/test.jsp',        //不同的域    type: 'GET',                     // jsonp模式只有GET 是合法的    data: {
           'action': 'aaron'    },    dataType: 'jsonp',                        // 数据类型    jsonp: 'jsonpCallback',// 指定回调函数名，与服务器端接收的一致，并回传回来})其实jquery 内部会转化成http://192.168.10.46/demo/test.jsp?jsonpCallback=jQuery202003573935762227615_1402643146875&action=aaron然后动态加载< script type="text/javascript"src="http://192.168.10.46/demo/test.jsp?jsonpCallback= jQuery202003573935762227615_1402643146875&action=aaron">然后后端就会执行jsonpCallback(传递参数 )，把数据通过实参的形式发送出去。

说到底,跟我们一开始写的流程是一样的,所有搞懂原理很重要

httpClinet内部转换

实现原理很简单，若想在B站点中通过Ajax访问A站点获取结果，固然有ajax跨域问题，但在B站点中访问B站点获取结果，不存在跨域问题，这种方式实际上是在B站点中ajax请求访问B站点的HttpClient，再通过HttpClient转发请求获取A站点的数据结果。但这种方式产生了两次请求，效率低，但内部请求，抓包工具无法分析，安全。

Access-Control-Allow-Origin 跨域设置多域名

转载地址：http://rvaq.baihongyu.com/