文档章节

JavaScript跨域问题解决办法

谢思华
 谢思华
发布于 2015/08/24 16:51
字数 524
阅读 222
收藏 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
广州
程序员
私信 提问
asp.net—WebApi跨域

一、什么是跨域?   定义:是指浏览器不能执行其他网站的脚本,它是由浏览器的同源策略造成的,是浏览器对JavaScript实施的安全限制。   同源策略限制了以下行为:   1、Cookie、Local...

WiTeem
2018/12/11
0
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

没有更多内容

加载失败,请刷新页面

加载更多

框架和库的区别

框架和库的区别 框架:是一套完整的解决方案;对项目的侵入性较大,项目如果需要更换框架,则需要重新架构整个项目。 node 中的 express; 库(插件):提供某一个小功能,对项目的侵入性较小...

庭前云落
10分钟前
2
1
基于 Dawn 进行多工程管理

1. 简述 当一个项目中子工程较多时,就会面临「单仓库(Monorepo)」还是「多仓库(Multirepo)」管理的问题。当然两个方式各有优缺点,而我们选择多工程单 Repo 时,能够带来一些管理上的简...

阿里云官方博客
10分钟前
1
0
Joomla 4具有可自定义的HTML电子邮件模板

Joomla 4大约每个月都会发布一个Alpha版本。上个月,我们得到了一个新的管理模板。 Joomla 4的最新版本是Alpha 12。 该版本的主要新特性是可定制的电子邮件模板。您将能够控制从您的网站发送...

六艺网络专注于Joomla
14分钟前
1
0
Idea配置

配置文件idea64.exe.vmoptions -Xms128m, 16 G 内存的机器可尝试设置为 -Xms512m (设置初始的内存数,增加该值可以提高 Java 程序的启动速度。 ) -Xmx750m, 16 G 内存的机器可尝试设置为 ...

行者终成事
16分钟前
2
0
大小仅1MB!超轻量级的人脸识别模型火爆Github

项目地址:https://github.com/Linzaer/Ultra-Light-Fast-Generic-Face-Detector-1MB 近日,用户Linzaer在Github上开源了一款适用于边缘计算设备、移动端设备以及 PC 的超轻量级通用人脸检测...

编程资源库
17分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部