文档章节

JavaScript跨域问题解决办法

谢思华
 谢思华
发布于 2015/08/24 16:51
字数 524
阅读 223
收藏 16

一、什么是跨域

       JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。这里把涉及到跨域的一些问题简单地整理一下:

      首先什么是跨域,简单地理解就是因为JavaScript同源策略的限制,a.com 域名下的js无法操作b.com或是c.a.com域名下的对象。更详细的说明可以看下表:

特别注意两点

       第一,如果是协议和端口造成的跨域问题“前台”是无能为力的,

       第二:在跨域问题上,域仅仅是通过“URL的首部”来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。
“URL的首部”指window.location.protocol +window.location.host,也可以理解为“Domains, protocols and ports must match”。

       接下来简单地总结一下在“前台”一般处理跨域的办法,后台proxy这种方案牵涉到后台配置,这里就不阐述了,有兴趣的可以看看yahoo的这篇文章:《JavaScript: Use a Web Proxy for Cross-Domain XMLHttpRequest Calls》

二、js调用接口跨域问题处理

以下截图为js调用接口出现跨域问题:

       加window.name参数   +   配置Allow-Origin头   可处理:

接口做这两个处理的部分代码如下:

JSONObject json = new JSONObject();
//跨域参数
String origin = request.getHeader("Origin") == null? "www.baidu.com.cn" : request.getHeader("Origin");
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Origin", origin); 
String windowName = env.param("windowName", null); //window.name
if("POST".equals(method)){        //判断方法是否post
    ....
}else{
	 json.put("uri", uri);
	 json.put("result", "0");
	 json.put("msg", "请求方法不是POST,操作失败");
} 

if (!T.isBlank(windowName) && "1".equals(windowName)) {	
	request.setAttribute("json", "<script>window.name='" + json.toJSONString() + "';</script>"); 
} else {
	request.setAttribute("json", json.toJSONString());
}

接口做了以上两个处理,能解决跨域问题,能成功post数据到接口了。

备注:上图代码中origin跨域代码中,更优写法如下:

//跨域参数
String origin = request.getHeader("Origin");
if (!T.isBlank(origin)) {
    response.setHeader("Access-Control-Allow-Credentials", "true");
    response.setHeader("Access-Control-Allow-Origin", origin);
}

三、跨域参考资料以及详细总结

       http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html




© 著作权归作者所有

谢思华
粉丝 77
博文 221
码字总数 152858
作品 0
广州
程序员
私信 提问
jquery中getJSON方法实现跨域

一、什么是跨域? 因为javascript同源策略的限制,a.com 域名下的js脚本无法操作b.com或是c.a.com域名下的对象。 1.什么引起了ajax不能跨域请求的问题? ajax本身实际上是通过XMLHttpReques...

柠檬草的味道
2013/05/30
1K
0
window.name实现的跨域数据传输

这篇文章是对 JavaScript跨域总结与解决办法 的补充。 有三个页面: a.com/app.html:应用页面。 a.com/proxy.html:代理文件,一般是一个没有任何内容的html文件,需要和应用页面在同一域下...

李朝强
2014/09/24
67
0
JavaScript跨域总结与解决办法

什么是跨域 JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。这里把涉及到跨域的一些问题简单地整理一下: ...

lovedreamland
2011/02/24
1K
0
Ajax跨域问题研究笔记

作者:fbysss msn:jameslastchina@hotmail.com blog:blog.csdn.net/fbysss 声明:本文由fbysss原创,转载请注明出处 关键字:Ajax跨域 一.试验准备 修改c:/windows/system32/drivers/etc/hos...

长平狐
2012/10/17
316
0
$.ajax jsonp parsererror

场景重现 通过发起的跨越请求代码如下: 发起 ajax 跨域请求后... 咋一看我还以为是我代码哪里写漏了,检查过后,代码没问题. 同时把完整的请求,直接扔到浏览器地址栏里访问,响应是正常的. 但是...

taadis
2017/06/08
250
0

没有更多内容

加载失败,请刷新页面

加载更多

Docker 可视化管理 portainer

官网安装指南: https://portainer.readthedocs.io/en/latest/deployment.html docker-compose.yml 位置,下载地址:https://downloads.portainer.io/docker-compose.yml...

Moks角木
31分钟前
2
0
Spring Security 实战干货:必须掌握的一些内置 Filter

1. 前言 上一文我们使用 Spring Security 实现了各种登录聚合的场面。其中我们是通过在 UsernamePasswordAuthenticationFilter 之前一个自定义的过滤器实现的。我怎么知道自定义过滤器要加在...

码农小胖哥
34分钟前
3
0
常见分布式事务解决方案

1 微服务的发展 微服务倡导将复杂的单体应用拆分为若干个功能简单、松耦合的服务,这样可以降低开发难度、增强扩展性、便于敏捷开发。当前被越来越多的开发者推崇,很多互联网行业巨头、开源...

asdf08442a
34分钟前
2
0
influxdb continuous queries(cq)从入门到放弃

从前一篇influxdb的文章prometheus基于influxdb的监控数据持久化存储方案完成之后,就一直在折腾influxdb发布测试和生产环境的问题,经过接近2个月的验证,最终发现使用influxdb自带cq的方案...

狗陈
46分钟前
7
0
7.线程通信

在现实生活中,如果一个人团队正在共同完成任务,那么他们之间应该有通信,以便正确完成任务。 同样的比喻也适用于线程。 在编程中,要减少处理器的理想时间,我们创建了多个线程,并为每个线...

Eappo_Geng
51分钟前
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部