跨域

异步上传文件并获得返回值（完全跨域） AJAX可以进行数据的异步请求，但对于文件和跨域问题却束手无策。 Jsonp可以进行跨域数据的异步请求，但同样不能使用于文件。 <form>表单可以进行跨域数据和文件的上传，但却会使页面跳转。 那么如何同时实现“异步”+“跨域”+“文件”+“返回值”这几个特性呢？方法如下： 原理： 将<form>表单通过一个iframe来submit，也就是将<form>的target属性设置为一个iframe的id，这样<form>的action URL就会在这个iframe中 打开，那么服务器的返回数据也就会输出到iframe中了。最后再通过主页面也iframe之间的交互完成对返回数据的读取（这涉及到跨域问题， 文章后面将介绍此问题的解决方法）。 基本结构： 前端部分（当前域名：www.test.com，与form中的action域名相同） <form action="http://www.test.com/io.php" method="POST" enctype="multipart/form-data" target="upload"> <input type="file" name="upload_file" /> <input type="submit" value="开始上传" /> </form> <iframe name="upload"

一、什么是跨域 JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。那什么是跨域呢，简单地理解就是因为JavaScript同源策略的限制，a.com域名下的js无法操作b.com或是c.a.com域名下的对象。 当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域 。不同域之间相互请求资源，就算作“跨域”。 例如： http://www.abc.com/index.html 请求 http://www.efg.com/service.php 。 有一点必须要注意： 跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了 。之所以会跨域，是因为受到了同源策略的限制，同源策略要求源相同才能正常进行通信，即协议、域名、端口号都完全一致。 大家可以参照下图，有助于深入理解跨域。 特别说明两点： 第一：如果是协议和端口造成的跨域问题“前台”是无能为力的。 第二：在跨域问题上，域仅仅是通过“URL的首部”来识别而不会根据域名对应的IP地址是否相同来判断。“URL的首部”可以理解为“协议, 域名和端口必须匹配” 。 二、什么是同源策略及其限制 同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。 它的存在可以保护用户隐私信息，防止身份伪造等(读取Cookie)。

##1. 什么是跨域（Cross-site)？ 想了解跨域，必须先了解一下“同源策略(same origin policy)”。 1.1 同源策略 它限制了某个域下的文档或者js与另一个域中的资源交互的方式，它提供了一种安全机制，这种安全机制可以避免来自恶意网站的攻击。 同源策略要求浏览器允许来自某个网页上的js请求来自另一个网页的数据，当且仅当两个页面来自相同的域。 1.2 什么是域(origin)？ 域是由三部分组合而成：URI Schema（协议类型），host name（域名）,port number（端口号） 举个例子： 1） http://www.domain.com 这个页面，URI Schema是http,host name是www.domain.com,port number是默认的80 2） https://www.xxx.com:8080/xxx/yyy URI Schema是https，hostname是www.xxx.com，port number是8080 由于1）和2）中的三部分都不相同，所以它们就是不同的域。 下面的图更好的解释了什么是同域： PS:IE浏览器里可能不太一样，它不会把端口号作为判断依据。 1.3 为什么要有同源策略？ 提出同源策略的目的是出于安全性考虑，它能够阻止来自恶意网站的脚本通过其他网站的DOM获取其他网站的信息

概述 CORS能做什么： 正常使用AJAX会需要正常考虑跨域问题，所以伟大的程序员们又折腾出了一系列跨域问题的解决方案，如JSONP、flash、ifame、xhr2等等。 本文介绍的CORS就是一套AJAX跨域问题的解决方案。 CORS的原理： CORS定义一种跨域访问的机制，可以让AJAX实现跨域访问。CORS 允许一个域上的网络应用向另一个域提交跨域 AJAX 请求。实现此功能非常简单，只需由服务器发送一个响应标头即可。 CORS浏览器支持情况如下图： CORS启航 　　假设我们页面或者应用已在 http://www.test1.com 上了，而我们打算从 http://www.test2.com 请求提取数据。一般情况下，如果我们直接使用 AJAX 来请求将会失败，浏览器也会返回“源不匹配”的错误，" 跨域 "也就以此由来。 　　利用 CORS， http://www.test2.com 只需添加一个标头，就可以允许来自 http://www.test1.com 的请求，下图是我在PHP中的 hander() 设置， “*”号表示允许任何域向我们的服务端提交请求 ： 　　 也可以设置指定的域名，如域名 http://www.test2.com ，那么就允许来自这个域名的请求 ： 　　当前我设置的header为“*”，任意一个请求过来之后服务端我们都可以进行处理&响应

【完全跨域】异步上传文件并获得返回值 作者：php-note.com 发布于：2015-03-01 10:58 分类：JS/jQuery 浏览(595) AJAX可以进行数据的异步请求，但对于文件和跨域问题却束手无策。 Jsonp可以进行跨域数据的异步请求，但同样不能使用于文件。 <form>表单可以进行跨域数据和文件的上传，但却会使页面跳转。 那么如何同时实现“异步”+“跨域”+“文件”+“返回值”这几个特性呢？方法如下： 原理： 将<form>表单通过一个iframe来submit，也就是将<form>的target属性设置为一个iframe的id，这样<form>的action URL就会在这个iframe中打开，那么服务器的返回数据也就会输出到iframe中了。最后再通过主页面与iframe之间的交互完成对返回数据的读取（这涉及到跨域问题，文章后面将介绍此问题的解决方法）。 基本结构： 前端部分（当前域名：www.test.com，与form中的action域名相同） 1 <form action="http://www.test.com/io.php" method="POST" enctype="multipart/form-data" target="upload"> 2 3 <input type="file" name="upload_file" /> 4 5

Ajax的应用中，由于安全的问题，浏览器默认是不支持跨域调用的。传统解决的方法，包括：（参考http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/） Local proxy: Needs infrastructure (can't run a serverless client) and you get double-taxed on bandwidth and latency (remote - proxy - client). Flash: Remote host needs to deploy a crossdomain.xml file, Flash is relatively proprietary and opaque to use, requires learning a one-off moving target programming langage. Script tag: Difficult to know when the content is available, no standard methodology, can be considered a "security risk". 以上方法都各有缺陷，都不是很好多解决方案。后来出现了一种叫 JSON with Padding

XMLHttpRequest 是一个浏览器接口，使得 Javascript 可以进行 HTTP (S) 通信。 　　最早，微软在 IE 5 引进了这个接口。因为它太有用，其他浏览器也模仿部署了，ajax 操作因此得以诞生。 　　但是，这个接口一直没有标准化，每家浏览器的实现或多或少有点不同。HTML 5 的概念形成后，W3C 开始考虑标准化这个接口。2008年 2 月，就提出了 XMLHttpRequest Level 2 草案。 　　这个 XMLHttpRequest 的新版本，提出了很多有用的新功能，将大大推动互联网革新。本文就对这个新版本进行详细介绍。 　　 一、老版本的 XMLHttpRequest 对象 　　在介绍新版本之前，我们先回顾一下老版本的用法。 　　首先，新建一个 XMLHttpRequest 的实例。 var xhr = new XMLHttpRequest (); 　　然后，向远程主机发出一个 HTTP 请求。 xhr.open ('GET'， 'example.php' ); xhr.send (); 　　接着，就等待远程主机做出回应。这时需要监控 XMLHttpRequest 对象的状态变化，指定回调函数。 xhr.onreadystatechange = function (){ if ( xhr.readyState == 4 && xhr

　跨域是我在日常面试中经常会问到的问题，这词在前端界出现的频率不低，主要原因还是由于安全限制(同源策略， 即JavaScript或Cookie只能访问同域下的内容)，因为我们在日常的项目开发时会不可避免的需要进行跨域操作，所以跨域能力也算是前端工程师的基本功之一。 　　和大多数跨域的解决方案一样，JSONP也是我的选择，可是某天PM的需求变了，某功能需要改成支持POST，因为传输的数据量比较大，GET形式搞不定。所以折腾了下闻名已久的 CORS（ 跨域资源共享，Cross-Origin Resource Sharing ） ，这边文章也就是折腾期间的小记与总结。 概述 CORS能做什么： 正常使用AJAX会需要正常考虑跨域问题，所以伟大的程序员们又折腾出了一系列跨域问题的解决方案，如JSONP、flash、ifame、xhr2等等。 本文介绍的CORS就是一套AJAX跨域问题的解决方案。 CORS的原理： CORS定义一种跨域访问的机制，可以让AJAX实现跨域访问。CORS 允许一个域上的网络应用向另一个域提交跨域 AJAX 请求。实现此功能非常简单，只需由服务器发送一个响应标头即可。 CORS浏览器支持情况如下图： 　　喜闻乐见、普大喜奔的支持情况，尤其是在 移动终端 上，除了opera Mini； 　　PC上的现代浏览器都能友好的支持，除了IE9-

最近ajax访问webservice遇到跨域的问题，网上搜索资料，总结如下(很多都是觉得人家总结不错的复制下来) <<用JSON来传数据，靠JSONP来跨域>> 先上我的已实现代码： 前端代码： $.ajax({ type: "get", url: " http://localhost/Service1.asmx/ getElevatorStatusJsonData ?jsoncallback=? ", dataType: "jsonp", jsonp: "json", data: "", success: function (result) { var data = eval(result); for (var i = 0; i < data.length; i++) { alert(data[i].ID + "--" + data[i].Name); } }, error: function (a, b, c) { alert(c); } }) ; 服务端代码： c# /// <summary> /// 获取状态数据信息 /// </summary> /// <returns></returns> [WebMethod] public void getElevatorStatusJsonData() { List<List<DeviceInfo>> elevatordatas

spring boot cors 实现 官方文档： https://spring.io/blog/2015/06/08/cors-support-in-spring-framework 有三种方法，可以通过在程序中通过代码，允许跨域请求。 1 声明一个CORS过滤器 统一在一个类中，实现对所有跨域的配置。 /** * @author pengpj * @date 2018/5/21 */ @Slf4j @Configuration public class MyConfiguration { /** * https://spring.io/blog/2015/06/08/cors-support-in-spring-framework * * @return filterRegistrationBean for cors filter */ @Bean public FilterRegistrationBean registrationCorsFilter() { log.info("registration cors filter..."); UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); CorsConfiguration config = new