js中的跨域
因为javascript的同源策略，导致它普通情况下不能跨域，直到现在，我还是不能完全理解js跨域的几种方法，没办法，只能慢慢学习，慢慢积累，这不，几天又在园里看到一篇博文，有所收获，贴上来看看;
原文来自：【http://www.cnblogs.com/dojo-lzz/p/4265637.html】
探讨跨域请求资源的几种方式
- 什么是跨域
- JSONP
- proxy代理
- cors
- xdr
由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。具体可以查看下表（来源）
JSONP
这种方式主要是通过动态插入一个script标签。浏览器对script的资源引用没有同源限制，同时资源加载到页面后会立即执行（没有阻塞的情况下）。
1 <script>
2 var _script = document.createElement('script');
3 _script.type = "text/javascript";
4 _script.src = "http://localhost:8888/jsonp?callback=f";
5 document.head.appendChild(_script);
6 </script>
实际项目中JSONP通常用来获取json格式数据，这时前后端通常约定一个参数callback，该参数的值，就是处理返回数据的函数名称。
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
6 <title>jsonp_test</title>
7
8 <script>
9 var f = function(data){
10 alert(data.name);
11 }
12 /*var xhr = new XMLHttpRequest();
13 xhr.onload = function(){
14 alert(xhr.responseText);
15 };
16 xhr.open('POST', 'http://localhost:8888/cors', true);
17 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
18 xhr.send("f=json");*/
19 </script>
20
21 <script>
22 var _script = document.createElement('script');
23 _script.type = "text/javascript";
24 _script.src = "http://localhost:8888/jsonp?callback=f";
25 document.head.appendChild(_script);
26 </script>
27 </head>
缺点：
1、这种方式无法发送post请求（这里）
2、另外要确定jsonp的请求是否失败并不容易，大多数框架的实现都是结合超时时间来判定。
Proxy代理
这种方式首先将请求发送给后台服务器，通过服务器来发送请求，然后将请求的结果传递给前端。
需要注意的是如果你代理的是https协议的请求，那么你的proxy首先需要信任该证书（尤其是自定义证书）或者忽略证书检查，否则你的请求无法成功。12306就提供了一个鲜活的例子。
还需要注意一点，对于同一请求浏览器通常会从缓存中读取数据，我们有时候不想从缓存中读取，所以会加一个preventCache参数，这个时候请求url变成：url?preventCache=12345567....;这本身没有什么问题，问题出在当使用某些前端框架（比如jquery）发送proxy代理请求时，请求url为proxy?url，同时设置preventCache：true，框架不能正确处理这个参数，结果发出去的请求变成proxy?url&preventCache=123456（正长应为proxy?url?preventCache=12356）;后端截取后发送的请求为url&preventCache=123456，根本没有这个地址，所以你得不到正确结果。
CORS
这是现代浏览器支持跨域资源请求的一种方式。
当你使用XMLHttpRequest发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头：Origin，后台进行一系列处理，如果确定接受请求则在返回结果中加入一个响应头：Access-Control-Allow-Origin;浏览器判断该相应头中是否包含Origin的值，如果有则浏览器会处理响应，我们就可以拿到响应数据，如果不包含浏览器直接驳回，这时我们无法拿到响应数据。
如果我们把Access-Control-Allow-Origin去掉，浏览器会驳回响应，我们也就拿不到数据。
需要注意的一点是Preflighted Request的透明服务器验证机制支持开发人员使用自定义的头部、GET或POST之外的方法，以及不同类型的主题内容。总结如如：
1、非GET 、POST请求
2、POST请求的content-type不是常规的三个：application/x- www-form-urlencoded（使用 HTTP 的 POST 方法提交的表单）、multipart/form-data（同上，但主要用于表单提交时伴随文件上传的场合）、text/plain（纯文本）
3、POST请求的payload为text/html
4、设置自定义头部
OPTIONS请求头部中会包含以下头部：Origin、Access-Control-Request-Method、Access-Control-Request-Headers，发送这个请求后，服务器可以设置如下头部与浏览器沟通来判断是否允许这个请求。
Access-Control-Allow-Origin、Access-Control-Allow-Method、Access-Control-Allow-Headers
如果你在调试状态，你会发现后台代码执行了两遍，说明发送了两次请求。注意一下我们的onload代码只执行了一次，所以说OPTIONS请求对程序来说是透明的，他的请求结果会被缓存起来。
如果我们修改一下后台代码，把Content-Type去掉，你会发现OPTIONS请求失败。
根据我的测试，当使用cors发送跨域请求时失败时，后台是接收到了这次请求，后台可能也执行了数据查询操作，只是响应头部不合符要求，浏览器阻断了这次请求。
XDR
这是IE8、IE9提供的一种跨域解决方案，功能较弱只支持get跟post请求，而且对于协议不同的跨域是无能为力的，比如在http协议下发送https请求。看一下微软自己的例子就行
以上就是我在实际项目中遇到的跨域请求资源的情况，有一种跨域需要特别注意就是在https协议下发送https请求，除了使用proxy代理外其他方法都无解，会被浏览器直接block掉。如果哪位道友知道解决方法，麻烦你告诉我一声。
最后附上完整的测试demo
iss中：
node-html
node-server
参考文献：
XDomainRequest - Restrictions, Limitations and Workarounds
js中的跨域的更多相关文章
- js中各种跨域问题实战小结（二）
这里接上篇:js中各种跨域问题实战小结(一) 后面继续学习的过程中,对上面第一篇有稍作休整.下面继续第二部分: -->5.利用iframe和location.hash -->6.windo ...
- js中各种跨域问题实战小结（一）
什么是跨域?为什么要实现跨域呢? 这是因为JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.也就是说只能访问同一个域中的资源.我觉得这就有必要了解下javascript中的同源策略 ...
- JS中实现跨域的方法总结
今天早上在地铁看了点基础知识的考察题,看到了一个JS跨域的问题,仔细想了想自己脑子里竟然只剩下jsonp跨域和用nginx反向代理进行跨域,想着还有别的几种方法,就是想不起来,这个人呢,一上岁数这个脑 ...
- 001_Three.js中的跨域问题
001_Three.js中的跨域问题 [情景描述]: 在初始化模型,引入字体和纹理皮肤图片的时候,由于跨域问题,出现了以下提示: Access to image at 'file:///F:/User ...
- JS中的跨域问题
一.什么是跨域? 1.定义:跨域是指从一个域名的网页去请求另一个域名的资源.比如从www.baidu.com 页面去请求 www.google.com 的资源.但是一般情况下不能这么做,它是由浏览器的 ...
- js中各种跨域问题实战小结
什么是跨域?为什么要实现跨域呢? 这是因为JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.也就是说只能访问同一个域中的资源.我觉得这就有必要了解下javascript中的同源 ...
- js中的跨域方法总结
什么是跨域? 浏览器的安全策略,只要协议,域名,端口有任何一个不同,就被当做不同的域. 下面对http://www.qichedaquan.com的同源检测 http://www.qichedaqua ...
- JS 中的跨域请求
跨域请求并不仅仅只是 Ajax 的跨域请求,而是对于一个页面来说,只要它请求了其他域名的资源了,那么这个过程就属于跨域请求了. 比如,一个带有其他域名的 src 的 <img> 标签,以及 ...
- 【原创】Vue.js 中 axios 跨域访问错误
1.假如访问的接口地址为 http://www.test.com/apis/index.php (php api 接口) 2.而开发地址为http://127.0.0.1:8080,当axios发起 ...
随机推荐
- Mysql数据多表查询及pymysql的使用
Exists关键字表示存在,在使用exists关键字时,内增查询语句不返回查询记录,而是返回一个真假值,True或者False,返回True外层语句才会进行查询:返回False时,外层查询语句不会进行 ...
- 第四十二篇 入门机器学习——Numpy的基本操作——索引相关
No.1. 使用np.argmin和np.argmax来获取向量元素中最小值和最大值的索引 No.2. 使用np.random.shuffle将向量中的元素顺序打乱,操作后,原向量发生改变:使用np. ...
- 6.mybatis----日志工厂
日志工厂 如果一个数据库操作出现了异常,我们需要排错,所以说日志就是最好的助手 曾经:sout,debug 现在:日志工厂 在Mybatis中具体使用哪一个日志,在设置中设定 咋设定? 在mybati ...
- CSS 盒子模型属性
盒子模型(Flexible Box) 属性 属性 说明 CSS box-align 指定如何对齐一个框的子元素 3 box-direction 指定在哪个方向,显示一个框的子元素 3 box-flex ...
- centos 7 安装 nginx maxmind GEO IP IP库相关部署
centos 7 上为nginx 增加Geo IP的功能 yum install gcc gcc-c++ make automake autoconf libtool wget unzip -y if ...
- 用js实现鼠标点击爱心特效
效果如图以下是代码 <script> !function(e, t, a) { function r() { for (var e = 0; e < s.length; e++) s ...
- ubuntu 终端快捷方式汇总
terminal 是一个命令行终端,将启动系统默认的shell,shell是一个解释并执行在命令行提示符输入的命令的程序. 启动 terminal1 在 “面板主页” 的应用程序搜索栏中,输入命令gn ...
- tomcat8.5优化配置
参考文章: https://www.cnblogs.com/steven-snow/p/9262025.html 1.Tomcat内存使用调整 windows系统在bin/catalina.bat文件 ...
- hdu1695(莫比乌斯反演+容斥)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1695 题目是求 在区间[a,b]选一个数x,区间[c,d]选一个数y,求满足gcd(x,y) = k ...
- ubuntu 下的ftp详细配置
FTP(文件传输协议)是一个较老且最常用的标准网络协议,用于在两台计算机之间通过网络上传/下载文件.然而, FTP 最初的时候并不安全,因为它仅通过用户凭证(用户名和密码)传输数据,没有进行加密. 警 ...