Angularjs 跨域請求

最近在作個項目,啓用了Angularjs做爲前端框架,後端則使用java服務端,引入了shiro框架做爲權限管理。 理想是豐滿的,現實是骨感的。 起先單域測試下一切Ok,進行二級域名跨域測試就出現問題了。前端

本文是基於單個頂級域名多個子域名的跨域 項目架構並不是採用SpringMVC,以及SSH等主流框架,使用了本身公司的非主流框架,請各位同窗本身糾正java

遇到坑以及填坑

  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的校驗,代碼以下:web

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設置修改成:apache

// 校驗數據來源,成功後進行跨域受權
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"); 
            }
        }
}
相關文章
相關標籤/搜索