JS跨域两三事
今日，前端开发要求新的Web服务需要支持跨域，因为要发起 Ajax 到后端web 服务域名请求数据；
前端application域名是 other.abc.com (举个栗子) api接口域名是 another.abc.com。
后端web application是SpringMVC开发，于是，我在web.xml 配置了新Filter。
Filter代码是这样：
public class CrossDomainFilter implements Filter {
private static final Logger logger = LoggerFactory.getLogger(CrossDomainFilter.class);
@Override
public void init(FilterConfig filterConfig) throws ServletException {
}
@Override
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
HttpServletRequest req = (HttpServletRequest) request;
String originDomain = req.getHeader("origin");
String[] hostSplit = StringUtils.split(originDomain, ".");
String subDomain = null != hostSplit && hostSplit.length >= 2 ? hostSplit[hostSplit.length - 2] + "." + hostSplit[hostSplit.length - 1] : null;
if (StringUtils.isNotEmpty(originDomain) && StringUtils.isNotEmpty(subDomain) && subDomain.equals("abc.com")) {
// 允许js 跨域
HttpServletResponse res = (HttpServletResponse) response;
res.setHeader("Access-Control-Allow-Origin", originDomain);
res.setHeader("Access-Control-Allow-Credentials", "true");
res.setHeader("Access-Control-Allow-Methods", "*");
res.setHeader("Access-Control-Allow-Headers", "x-requested-with,content-type");
}
chain.doFilter(request, response);
}
@Override
public void destroy() {
}
}
开发完成后我本地写一个简单的页面做测试，是一个php编写的Web页面，一开始是这样的：
<html>
<head>
<title>前端页面 - js跨域local测试</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/core.js"></script>
</head>
<body>
<a href="javascript:;" class="do_request">请求</a>
<script type="text/javascript">
$(function () {
$(".do_request").on("click", function () {
console.log("request sent!");
$.ajax({
url: "http://another.abc.com:8080/geo/gpsconvert",
data: {
"_gps":"120,30"
},
success: function (res) {
alert(res.succ);
},
dataType: "jsonp"
});
});
});
</script>
</body>
</html>
本地点击发 Ajax 请求给后端接口，发现 req.getHeader("origin") 这个返回总是 null，百思不得其解，
经过前端提示得知，发送ajax 请求必须按照下面：
$.ajax({
crossDomain: true,
url: "http://another.abc.com:8080/geo/gpsconvert",
data: {
"_gps":"120,30"
},
success: function (res) {
alert(res.succ);
},
dataType: "json"
});
服务端的 origin 才能拿到 请求发起方的host，jsonp 不是真正的CORS！而是一种跨域trick，另外
jsonp 只支持GET！
设置 crossDomain: true 后，服务端 origin 正常。
对PHP 来说，只要一行代码：
$origin = isset($_SERVER['HTTP_ORIGIN']) ? $_SERVER['HTTP_ORIGIN'] : null;
此外，Access-Control-Allow-Origin 的值谁请求上来给谁设置Response Header 即可。不建议设置 为 Access-Control-Allow-Origin: *
这样相当于所有请求的域都允许跨域了，显然不大合适。
JS跨域两三事的更多相关文章
- 5种处理js跨域问题方法汇总（转载）
1.JSONP跨域GET请求 ajax请求,dataType为jsonp.这种形式需要请求在服务端调整为返回callback([json-object])的形式.如果服务端返回的是普通json对象.那 ...
- JS跨域（ajax跨域、iframe跨域）解决方法及原理详解（jsonp）
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- 前端Js跨域方法汇总—剪不断，理还乱，是跨域
1.通过jsonp跨域2.通过修改document.domain来跨子域(iframe)3.隐藏的iframe+window.name跨域4.iframe+跨文档消息传递(XDM)5.跨域资源共享 C ...
- 【js跨域】js实现跨域访问的几种方式
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- 【前端】【转】JS跨域问题总结
详情见原博客:详解js跨域问题 概念:只要协议.域名.端口有任何一个不同,都被当作是不同的域. 跨域资源共享(CORS) CORS(Cross-Origin Resource Sharing)跨域资源 ...
- js跨域访问，No 'Access-Control-Allow-Origin' header is present on the requested resource
js跨域访问提示错误:XMLHttpRequest cannot load http://...... No 'Access-Control-Allow-Origin' header is prese ...
- 利用JS跨域做一个简单的页面访问统计系统
其实在大部分互联网web产品中,我们通常会用百度统计或者谷歌统计分析系统,通过在程序中引入特定的JS脚本,然后便可以在这些统计系统中看到自己网站页面具体的访问情况.但是有些时候,由于一些特殊情况,我们 ...
- 三种方法实现js跨域访问
转自:http://narutolby.iteye.com/blog/1464436 javascript跨域访问是web开发者经常遇到的问题,什么是跨域,一个域上加载的脚本获取或操作另一个域上的文档 ...
- js跨域问题的解决
js提交请求给别的应用实例或者别的服务器,由于同源策略,存在js跨域的情况,我所知道两种处理方式: 1.jquery ajax+jsonp <script type="text/jav ...
随机推荐
- Cassandra 原理介绍
Cassandra最初源自Facebook,结合了Google BigTable面向列的特性和[Amazon Dynamo](http://en.wikipedia.org/wiki/Dynamo(s ...
- Light OJ 1085 - All Possible Increasing Subsequences
题目 link 给定一个序列, 求出上升子序列的总数. 分析 Dp[i] 表示序列 以 i 结尾的数目. 可知 Dp[i]=∑Dp[x]+1 这是一个前缀和, 用树状数组维护. Code #inclu ...
- typescript解决深度拷贝中循环引用引起的死循环
循环引用有人说就是一种不健康的状态,即你中有我,我中有你 hasObj: any = []; deepCopy(data: any) { this.hasObj.push(data); //最终就是返 ...
- SQLAlchemy+Flask-RESTful使用(三)
前言 顺理成章地,19.3.21起笔了第三章.也就是最近没啥事了,才有时间搞这些.生命不息奋斗不止吧! 变更记录 # 19.3.21 起笔 # 19.3.21 增加 Flask-RESTful如何获取 ...
- 详解MariaDB数据库的触发器
1.什么是触发器 触发器是一种特殊的存储过程,它在插入,删除或修改特定表中的数据时触发执行 它比数据库本身标准的功能有更精细和更复杂的数据控制能力 2.触发器的作用: 2.1 安全性 可以基于数据库的 ...
- Ipa 脱壳工具 Clutch dumpdecrypted 使用
1 Clutch 使用 下载地址 : https://github.com/kjcracks/clutch/releases 下载之后去掉去掉版本号 拖入手机的 /usr/bin/ 目录下 执行 c ...
- bat实现固定时间循环抓取设备log
背景:测试时需要实时抓取android设备log,但是一份log抓取过来非常庞大(有时超过500M+,编辑器都打不开,还得找工具进行分割,甚是蛋疼),查看也非常不方便. 解决:基于上述情况,与其之后进 ...
- SpringBoot整合Swagger测试api构建
@Author:SimpleWu 什么是Swagger? Swagger是什么:THE WORLD'S MOST POPULAR API TOOLING 根据官网的介绍: Swagger Inspec ...
- BeanUtils.copyProperties缓解代码压力，释放双手
简单描述:之前在写代码的时候,经常把表单提交到后台的对象的参数,通过getter方法取出来,然后,再通过setter方法传递给需要的对象,代码中写了很多get set这种方法,后来听同事说,sprin ...
- 非递归并查集——zoj4109
卡常卡的我难受 非递归并查集好像写起来常数小一点 int F[maxn]; int Find(int x){ int r = x; while (F[r] != r)r = F[r]; int i = ...