跨域问题总结
2017-02-27 20:37
260 查看
原创文章,转载请注明
之前调整架构,一直忘了解决跨域问题。趁此机会,总结一下跨域的解决方案。
跨域的解决方案可大致分为客户端,服务端。客户端之间的跨域可以通过写脚本,客户端与服务端的跨域,比如ajax请求的跨域,最好是通过服务端的解决方案。这样对客户端透明。不需要额外的编码,而且这种方式是合理的,因为客户端的解决方案说的不好听一点都是通过漏洞进行解决的。
需要注意一点,该属性需要域名相同才能访问,因此在远程页面被加载后需要代理会原始域iframe.contentWindow.location=页面A
如果只是客户端对客户端进行跨域,那么该方法还是可以的。简单,安全。
如果只是客户端对客户端,并且数据为静态数据,那么该方法也是可以的。
如果只是客户端对客户端,并且数据为静态数据,那么该方法也是可以的。
如果想用它来解决客户端对服务端的跨域,绝对不要用。
有几个问题:1、jsonp和json的结构是有略微差异的,因此服务端的代码需要修改。
2、jsonp是利用src标签实现,因此不能设置request头信息。因此无法通过request头信息进行一些验证。
3、jsonp是利用src标签实现,因此不支持post,put,delete,只支持get
Access-Control-Allow-Origin表示允许的请求方域名
Access-Control-Allow-Methods表示允许的请求方式
三、例子
最后举一个例子,在spring-boot中,通过filter进行跨域设置。推荐一个第三方的filter实现,可以直接用
然后配置该filter即可
之前调整架构,一直忘了解决跨域问题。趁此机会,总结一下跨域的解决方案。
跨域的解决方案可大致分为客户端,服务端。客户端之间的跨域可以通过写脚本,客户端与服务端的跨域,比如ajax请求的跨域,最好是通过服务端的解决方案。这样对客户端透明。不需要额外的编码,而且这种方式是合理的,因为客户端的解决方案说的不好听一点都是通过漏洞进行解决的。
一、客户端
1、window.name
该属性很特别,通过iframe加载其他页面时,该值为被加载页面的值。比如页面A通过iframe加载页面B,页面B中window.name={page:b},那么我们在A页面的iframe中获得的值iframe.contentWindow.name为{page:b}。需要注意一点,该属性需要域名相同才能访问,因此在远程页面被加载后需要代理会原始域iframe.contentWindow.location=页面A
如果只是客户端对客户端进行跨域,那么该方法还是可以的。简单,安全。
2、利用src标签
src是可以跨域的,不然你如何从其他域加载js,那么我们也可以利用src标签进行数据传递方法一:动态创建script
利用js动态创建script,数据存在script之中。如果只是客户端对客户端,并且数据为静态数据,那么该方法也是可以的。
方法二:jsonp
可能很多人喜欢用jsonp,其实jsonp的原理就是通过src标签,并不是xhr方式。如果只是客户端对客户端,并且数据为静态数据,那么该方法也是可以的。
如果想用它来解决客户端对服务端的跨域,绝对不要用。
有几个问题:1、jsonp和json的结构是有略微差异的,因此服务端的代码需要修改。
2、jsonp是利用src标签实现,因此不能设置request头信息。因此无法通过request头信息进行一些验证。
3、jsonp是利用src标签实现,因此不支持post,put,delete,只支持get
二、服务端
其实服务端的解决方案是最合理的,方法是合理的设置response头信息。主要的有Access-Control-Allow-Origin,Access-Control-Allow-MethodsAccess-Control-Allow-Origin表示允许的请求方域名
Access-Control-Allow-Methods表示允许的请求方式
1、filter
在filter中进行合理的response头信息配置2、spring4
加上@CrossOrigin注解 三、例子
最后举一个例子,在spring-boot中,通过filter进行跨域设置。推荐一个第三方的filter实现,可以直接用<dependency> <groupId>com.thetransactioncompany</groupId> <artifactId>java-property-utils</artifactId> <version>1.9</version> </dependency> <dependency> <groupId>com.thetransactioncompany</groupId> <artifactId>cors-filter</artifactId> <version>1.7</version> </dependency>
然后配置该filter即可
@Bean public FilterRegistrationBean filterRegistrationBean() { FilterRegistrationBean registrationBean = new FilterRegistrationBean(); CORSFilter corsFilter = new CORSFilter (); registrationBean.setFilter(corsFilter); //相当于response的头文件属性Access-Control-Allow-Origin registrationBean.addInitParameter("cors.allowOrigin", "*"); //相当于response的头文件属性Access-Control-Allow-Methods registrationBean.addInitParameter("cors.supportedMethods", "GET, POST, HEAD, PUT, DELETE"); List<String> urlPatterns = new ArrayList<String>(); urlPatterns.add("/*"); registrationBean.setUrlPatterns(urlPatterns); return registrationBean; }
相关文章推荐
- ajax跨域访问报错501的解决方法
- 探秘ajax跨域请求
- NODE.JS跨域问题的完美解决方案
- 基于iframe实现ajax跨域请求 获取网页中ajax数据
- jquery ajax结合thinkphp的getjson实现跨域的方法
- jquery+thinkphp实现跨域抓取数据的方法
- PHP如何实现跨域
- JavaScript cookie 跨域访问之广告推广
- ie7下利用ajax跨域盗取cookie的解决办法
- 详解Javascript几种跨域方式总结
- javascript跨域的方法汇总
- 在Ajax中使用Flash实现跨域数据读取的实现方法
- 浅谈js中几种实用的跨域方法原理详解
- 详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
- 浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
- AJAX实现跨域的三种方法(代理,JSONP,XHR2)
- js实现跨域访问的三种方法
- 如何设置iframe高度自适应在跨域情况下的可用方法
- 使用script的src实现跨域和类似ajax效果
- Ajax跨域实现代码(后台jsp)