推荐先读一下这篇文章：

https://segmentfault.com/a/1190000012469713
http://www.dailichun.com/2017/03/22/ajaxCrossDomainSolution.html

在聊这个问题之前，不妨先思考一下什么事跨域以及解决跨域的原理 ( ajax跨域只是属于浏览器"同源策略"中的一部分,其它的还有Cookie跨域iframe跨域,LocalStorage跨域等这里不做介绍)；

如何解决ajax跨域

跨域常用解决方法：

  • JSONP方式
  • CORS方式
  • 代理请求方式
  • 图片Ping
  • 设置document.domain = my.com
  • 使用websocket通信

一般ajax跨域解决就是通过JSONP解决或者CORS解决,如以下:(注意，现在已经几乎不会再使用JSONP了，所以JSONP了解下即可)

（一）JSONP方式解决跨域问题

jsonp解决跨域问题是一个比较古老的方案(实际中不推荐使用),这里做简单介绍(实际项目中如果要使用JSONP,一般会使用JQ等对JSONP进行了封装的类库来进行ajax请求)

实现原理

JSONP之所以能够用来解决跨域方案,主要是因为 <script> 脚本拥有跨域能力,而JSONP正是利用这一点来实现。具体原理如图

实现流程

JSONP的实现步骤大致如下(参考了来源中的文章)

  • 客户端网页网页通过添加一个<script>元素，向服务器请求JSON数据，这种做法不受同源政策限制

    function addScriptTag(src) {
    
  var script = document.createElement('script');
    
  script.setAttribute("type","text/javascript");
    
  script.src = src;
    
  document.body.appendChild(script);
    
}

window.onload = function () {
    
  addScriptTag('http://example.com/ip?callback=foo');
    
}

function foo(data) {
    
  console.log('response data: ' + JSON.stringify(data));
    
};

    请求时,接口地址是作为构建出的脚本标签的src的,这样,当脚本标签构建出来时,最终的src是接口返回的内容

  • 服务端对应的接口在返回参数外面添加函数包裹层
foo({

  "test": "testData"

});
  • 由于<script>元素请求的脚本，直接作为代码运行。这时，只要浏览器定义了foo函数，该函数就会立即调用。作为参数的JSON数据被视为JavaScript对象，而不是字符串，因此避免了使用JSON.parse的步骤。

注意,一般的JSONP接口和普通接口返回数据是有区别的,所以接口如果要做JSONO兼容,需要进行判断是否有对应callback关键字参数,如果有则是JSONP请求,返回JSONP数据,否则返回普通数据

使用注意

基于JSONP的实现原理,所以JSONP只能是“GET”请求,不能进行较为复杂的POST和其它请求,所以遇到那种情况,就得参考下面的CORS解决跨域了(所以如今它也基本被淘汰了)

（二）CORS解决跨域问题

CORS的原理上文中已经介绍了，这里主要介绍的是，实际项目中，后端应该如何配置以解决问题(因为大量项目实践都是由后端进行解决的)，上面链接文章整理了一些常见的后端解决方案:

（三）代理请求方式解决接口跨域问题

注意，由于接口代理是有代价的，所以这个仅是开发过程中进行的。

与前面的方法不同，前面CORS是后端解决，而这个主要是前端对接口进行代理，也就是:

  • 前端ajax请求的是本地接口
  • 本地接口接收到请求后向实际的接口请求数据，然后再将信息返回给前端
  • 一般用node.js即可代理

关于如何实现代理，这里就不重点描述了，方法和多，也不难，基本都是基于node.js的。

搜索关键字node.js,代理请求即可找到一大票的方案。

（四）图片Ping

我们知道，一个网页可以从任何网页加载图像，不用担心跨域不跨域，所以，我们就可以利用图片不受“同源限制”这一点进行跨域通信。 
我们利用JS创建一个新的Image对象，并把src属性设置为指向请求的地址，通过监听onload和onerror事件来确定是否接受到了响应。响应的数据可以是任意内容，但通常是像素图或204响应。

需要注意的是，新图像元素只要设置了src属性就会开始下载，所以我们这里的事件一定要在指定src属性之前绑定，这也是为什么我们这里不需要把img标签插入DOM 的原因。

<body>

    <button id="Ping">图像Ping发送请求</button>

    <script>

        var btn=document.getElementById('Ping');

        btn.onclick=function () {

            var img=new Image();

            img.onload=img.onerror=function () {

                alert("Done");

            };

            img.src="http://localhost:8081/img?name=Joy";

        }

    </script>

</body>
//服务器代码

app.get('/img',function (req,res) {

   res.send("我是一张图片");

});

这种方式优点是很明显的：兼容性非常好，缺点就是：只能发生GET请求，而且无法获取响应文本。

聊聊js跨域的更多相关文章

  1. 5种处理js跨域问题方法汇总（转载）

    1.JSONP跨域GET请求 ajax请求,dataType为jsonp.这种形式需要请求在服务端调整为返回callback([json-object])的形式.如果服务端返回的是普通json对象.那 ...

  2. JS跨域（ajax跨域、iframe跨域）解决方法及原理详解（jsonp）

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  3. 前端Js跨域方法汇总—剪不断，理还乱，是跨域

    1.通过jsonp跨域2.通过修改document.domain来跨子域(iframe)3.隐藏的iframe+window.name跨域4.iframe+跨文档消息传递(XDM)5.跨域资源共享 C ...

  4. 【js跨域】js实现跨域访问的几种方式

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  5. 【前端】【转】JS跨域问题总结

    详情见原博客:详解js跨域问题 概念:只要协议.域名.端口有任何一个不同,都被当作是不同的域. 跨域资源共享(CORS) CORS(Cross-Origin Resource Sharing)跨域资源 ...

  6. js跨域访问，No 'Access-Control-Allow-Origin' header is present on the requested resource

    js跨域访问提示错误:XMLHttpRequest cannot load http://...... No 'Access-Control-Allow-Origin' header is prese ...

  7. 利用JS跨域做一个简单的页面访问统计系统

    其实在大部分互联网web产品中,我们通常会用百度统计或者谷歌统计分析系统,通过在程序中引入特定的JS脚本,然后便可以在这些统计系统中看到自己网站页面具体的访问情况.但是有些时候,由于一些特殊情况,我们 ...

  8. 三种方法实现js跨域访问

    转自:http://narutolby.iteye.com/blog/1464436 javascript跨域访问是web开发者经常遇到的问题,什么是跨域,一个域上加载的脚本获取或操作另一个域上的文档 ...

  9. js跨域问题的解决

    js提交请求给别的应用实例或者别的服务器,由于同源策略,存在js跨域的情况,我所知道两种处理方式: 1.jquery ajax+jsonp <script type="text/jav ...

随机推荐

  1. cache和内存

    CPU与内存 北桥:主桥,主要用来处理高速信号,负责与处理器的联系:CPU通过FSB前端总线来访问内存控制器. 南桥:IO桥,负责IO总线之间的通信,比如PCI总线.SATA.USB等,可以连接光驱. ...

  2. linux recv函数返回值分析

    函数原型: ssize_t recv(int sockfd, void *buf, size_t len, int flags); 该函数第一个参数制定接收端套接字描述符; 第二个参数指明一个缓冲区, ...

  3. 2015年Android开发新技术盘点

    又到年末. 利用中午的时间,汇总盘点一下今年Android开发方面的新技术.感觉如今Android开发没有曾经那么纯粹了,出现了非常多新的开发模式. 2015年影响比較普遍的新技术应该就是Materi ...

  4. java 对象占用内存查看 以及JVM级别 方法修改等

    public interface Instrumentation 此类提供检测 Java 编程语言代码所需的服务.检测是向方法中添加字节码,以搜集各种工具所使用的数据.由于更改完全是进行添加,所以这些 ...

  5. Shader 结构体中语义的理解

    Shader编写通常会遇到语义 1 float4 vert(float4:POSITION):SV_POSITION 2 { 3 return mul(UNITY_MATRIX_MVP,v); 4 } ...

  6. IOS启动页动画（uiview 淡入淡出效果 )2

    Appdelegate里面右个这个函数,只要它没结束,你的等待界面就不会消失.以在启动的时候做些动画 - (BOOL)application:(UIApplication *)application ...

  7. iOS 9之3D Touch功能

    首先要有真机iPhone 6s以上,开发工具Xcode 7,然后在官方文档拷贝一段文字就可以了. <key>UIApplicationShortcutItems</key>   ...

  8. EventBus的使用详解，功能为在Fragment，Activity，Service，线程之间传递消息

    最近跟同事用到了EventBus的使用,之前不太了解EventBus,查阅资料发现EventBus还挺好用的,用法比较简单,下面就把我看到的关于EventBus的博客分享给大家,里面介绍了很多的使用详 ...

  9. [Sdoi2013]直径（树的直径）

    //36分 #include<cstdio> #include<cstdlib> #include<cstring> #include<ctime> # ...

  10. poj2349

    Arctic Network Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 0   Accepted: 0 Descript ...