文档章节

Angularjs 跨域请求

匿名访客
 匿名访客
发布于 2016/06/25 09:57
字数 516
阅读 336
收藏 5

最近在做个项目,启用了Angularjs作为前端框架,后端则使用java服务端,引入了shiro框架作为权限管理。 理想是丰满的,现实是骨感的。 起先单域测试下一切Ok,进行二级域名跨域测试就出现问题了。

本文是基于单个顶级域名多个子域名的跨域 项目架构并非采用SpringMVC,以及SSH等主流框架,使用了自己公司的非主流框架,请各位同学自己纠正

遇到坑以及填坑

  1. Access-Control-Allow-Origin,Access-Control-Allow-Headers,Access-Control-Allow-Methods 跨域请求的时候遇到了Access-Control-Allow-Origin问题,起先在Filter中是这么解决的,代码如下:
response.addHeader("Access-Control-Allow-Origin","*");
response.addHeader("Access-Control-Allow-Headers", "accept, content-type");
response.addHeader("Access-Control-Allow-Methods", "DELETE, GET, HEAD, OPTIONS, PATCH, POST, PUT");

但是考虑到Origin全开放有点不好吧,然后我也多想,就直接在Filter中写了一个Origin的校验,代码如下:

private String getDomain(String host) {
      if (host.endsWith(domain)) {
        return SecondDomainKit.contains(host.substring(0, host.length() - (domain.length() + 1)));
      } else  return null;
}

response的Header设置修改为:

// 校验数据来源,成功后进行跨域授权
String origin = request.getHeader("Origin");
if (StrKit.notBlank(origin)) {
        Pattern pattern = Pattern.compile("([a-zA-z]+://){0,1}([^\\s]*)");
        Matcher matcher = pattern.matcher(origin);
        if (matcher.find()) {
            String host = matcher.group(2);
            if (host.endsWith(domain) && !host.equals(domain) && StrKit.notBlank(getDomain(host))) {
                response.addHeader("Access-Control-Allow-Origin",
                request.getScheme() + "://" + getDomain(host) + "." + domain);
                response.addHeader("Access-Control-Allow-Headers", "accept, content-type");
                response.addHeader("Access-Control-Allow-Methods", "DELETE, GET, HEAD, OPTIONS, PATCH, POST, PUT");
            }
        }
}
  1. session不共享 在shiro.ini中配置为使用Cookies进行Session管理,配置如下:
sessionIdCookie = org.apache.shiro.web.servlet.SimpleCookie
sessionIdCookie.name = JMSESSIONID #可修改Cookie的名称
sessionIdCookie.domain = xxxx.com #这里填入顶级域名
sessionIdCookie.maxAge = 604800
...
sessionManager = org.apache.shiro.web.session.mgt.DefaultWebSessionManager
sessionManager.sessionIdCookie = $sessionIdCookie
sessionManager.sessionIdCookieEnabled = true
...
  1. POST请求中session会刷新,导致登陆成功之后,Shiro任然取不到身份信息,这个也困扰了我好久。直接给出修改代码,在js中修改如下:
app.config(['$httpProvider', function($httpProvider) {
      $httpProvider.defaults.withCredentials = true;
}]);

将Filter中response的Header修改下,代码如下:

// 校验数据来源,成功后进行跨域授权
String origin = request.getHeader("Origin");
if (StrKit.notBlank(origin)) {
        Pattern pattern = Pattern.compile("([a-zA-z]+://){0,1}([^\\s]*)");
        Matcher matcher = pattern.matcher(origin);
        if (matcher.find()) {
            String host = matcher.group(2);
            if (host.endsWith(domain) && !host.equals(domain) && StrKit.notBlank(getDomain(host))) {
                response.addHeader("Access-Control-Allow-Origin",
                request.getScheme() + "://" + getDomain(host) + "." + domain);
                response.addHeader("Access-Control-Allow-Headers", "accept, content-type");
                response.addHeader("Access-Control-Allow-Methods", "DELETE, GET, HEAD, OPTIONS, PATCH, POST, PUT");
                // 是否支持cookie跨域
                response.addHeader("Access-Control-Allow-Credentials", "true"); 
            }
        }
}

© 著作权归作者所有

共有 人打赏支持
匿名访客
粉丝 1
博文 13
码字总数 1620
作品 0
温岭
程序员
AngularJS跨域问题 ajax 跨域

先看代码: 一:案例实现 从网上下载了一个AngularJS项目,配置启动后发现数据发送不到自己的后台中去,总是提示跨域问题。 下面是AngularJS的部分代码: <!DOCTYPE html PUBLIC "-//W3C//D...

simpower
2017/12/13
0
0
Angular.js 相关记录

AngularJS作用域文档:http://docs.angularjs.org/api/ng.$rootScope.Scope ng-view 指令的角色是为当前路由把对应的视图模板载入到布局模板中。 AngularJS内置过滤器:http://code.angular...

彭博
2014/04/25
0
2
Angular通过CORS实现跨域方案

以前有一篇很老的文章网上转了很多,包括现在如果你百度"跨域"这个关键字,前几个推荐的都是"Javascript跨域总结与解决方案".看了一下感觉手段有点陈旧了,有一些比如document.domain还有ifram...

顽Shi
2014/08/18
0
16
Angular中ui-grid的使用详解

Angular中ui-grid的使用   在项目开发的过程中,产品经理往往会提出各种需求,以提高用户体验。最近,项目中用到的表格特别多,而且表格的列数和行数也超多。为了让用户浏览更爽,产品经理...

半指温柔乐
08/05
0
0
AngularJS 中文资料+工具+库+Demo 大搜集

中文学习资料: 中文资料且成系统的就这么多,优酷上有个中文视频。 http://www.cnblogs.com/lcllao/archive/2012/10/18/2728787.html 翻译的官方的Guide http://www.ituring.com.cn/miniboo...

liaolzy2
2015/05/31
0
0

没有更多内容

加载失败,请刷新页面

加载更多

TypeScript基础入门之JSX(一)

转发 TypeScript基础入门之JSX(一) 介绍 JSX是一种可嵌入的类似XML的语法。 它旨在转换为有效的JavaScript,尽管该转换的语义是特定于实现的。 JSX在React框架中越来越受欢迎,但此后也看到了...

durban
24分钟前
0
0
JavaScript使用原型判断对象类型

1. constructor属性 在JavaScript创建对象(二)——构造函数模式中,我们说过可以使用对象的constructor属性判断对象的类型:p1.constructor === Person,可能当时就有细心的读者会想,我们...

Bob2100
26分钟前
1
0
10-《深度拆解JVM》JVM是怎么实现invokedynamic的?(下)

一、问题引入 上回讲到,为了让所有的动物都能参加赛马,Java 7 引入了 invokedynamic 机制,允许调用任意类的“赛跑”方法。不过,我们并没有讲解 invokedynamic,而是深入地探讨了它所依赖...

飞鱼说编程
46分钟前
2
0
457. Circular Array Loop

Description Difficulty : Medium You are given an array of positive and negative integers. If a number n at an index is positive, then move forward n steps. Conversely, if it's n......

52iSilence7
今天
1
0
MySQL SQL 常见用法

某字段重复记录 select a.fieldA from tableA a group by a.fieldA having count(a.fieldA)>1;==select * from (select a.fieldA, count(1) as faCount from tableA a group......

园领T
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部