跨域问题

备注:有时候项目有点忙,都忘记思考,一次面试中提出的跨域的问题,才恍然大悟,做了一下小的总结,望指正!

过滤拦截请求!!!

由于工程合作开发的需要,后台的应用要能支持跨域访问,但是在这个跨域访问“时好时坏”,我们这帮屌丝所知道的就是加上两个jar包,然后声明一下Filter,感觉很简单的有没有!!感觉自己很牛X有没有!!全是幻觉!!要不然怎么会时好时坏!!为了深入了解这个问题,决定写这篇文章总结一下。

要知道跨域请求就要先了解同源策略,那么什么是同源?什么是不同源?简单来说就是,如果两个资源,包括HTML页面、JavaScript脚本、css样式,对应的协议、域名和端口完全相同,那么这两个资源就是同源的,Same-origin policy解释得很清楚。那么同源策略的意思就是一个源中的资源访问另外一个源中的资源,在在这一点上JavaScript的跨站资源访问表现的更加明显。在HTML5之前Ajax是不允许发起跨站请求的,如果有需求的话,可以使用JSONP等方法,但是缺点就是:

只支持Get不支持Post;

本质上是脚本注入的方式,存在安全隐患;

还有JSONP的优缺点,但是自从HTML5出现之后,提出了CORS(跨站资源共享)这种方式,极大地方便了日常的开发。如果要理解CORS的工作原理,首先要知道跨域访问是怎么被禁止的,之前本屌丝一直以为是前台的跨域访问请求不能发出去,是实现同源策略的浏览器拦截了该请求,但是后来才知道浏览器并没有拦截请求,而是拦截了服务器端返回的响应。

所以如果要支持跨域访问,需要浏览器和后台服务器程序同时支持,如果这两个条件不能同时满足,则还是不能支持跨域访问。

用于CORS中的Http的首部有如下几个:

响应头

Access-Control-Allow-Origin: 允许跨域访问的域,可以是一个域的列表,也可以是通配符”*”;

Access-Control-Allow-Methods: 允许使用的请求方法,以逗号隔开;

Access-Control-Allow-Headers: 允许自定义的头部,以逗号隔开,大小写不敏感;

Access-Control-Expose-Headers: 允许脚本访问的返回头,请求成功后,脚本可以在XMLHttpRequest中访问这些头的信息

Access-Control-Allow-Credentials: 是否允许请求带有验证信息,XMLHttpRequest请求的withCredentials标志设置为true时,认证通过,浏览器才将数据给脚本程序。

Access-Control-Max-Age: 缓存此次请求的秒数。在这个时间范围内,所有同类型的请求都将不再发送预检请求而是直接使用此次返回的头作为判断依据,非常有用,大幅优化请求次数;

请求头

Origin: 普通的HTTP请求也会带有,在CORS中专门作为Origin信息供后端比对,表明来源域,要与响应头中的Access-Control-Allow-Origin相匹配才能进行跨域访问;

Access-Control-Request-Method: 将要进行跨域访问的请求方法,要与响应头中的Access-Control-Allow-Methods相匹配才能进行跨域访问;

Access-Control-Request-Headers: 自定义的头部,所有用setRequestHeader方法设置的头部都将会以逗号隔开的形式包含在这个头中,要与响应头中的Access-Control-Allow-Headers相匹配才能进行跨域访问

从支持跨域访问的范围说,可以有整个服务器、单个应用程序、单个接口。

java服务器端解决跨域问题:现在很多开发的API都支持ajax直接请求,这样就会导致跨域的问题,解决跨域的问题一方面可以从前端,另一方面就是服务器端。

既然是搞服务器端,做对外的API服务,当然是做到越简单越好,前端只需要傻傻的使用就好。

目前我接触来的情况是有2种实现方式,下面直接代码,你们根据自己项目情况,选择或者修改其中的代码,所有代码都是项目实战中运行的。

第一种情况,比较简单,让所有的controller类继承自定义的BaseController类,改类中将对返回的头部做些特殊处理。

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

public abstract class BaseController {

  /**

    * description:send the ajax response back to the client side

    * @param responseObj

    * @param response

    */

    protected void writeAjaxJSONResponse(Object responseObj, HttpServletResponse response) {

        response.setCharacterEncoding("UTF-8");

        response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate"); // HTTP 1.1

        response.setHeader("Pragma", "no-cache"); // HTTP 1.0

        /**

        * for ajax-cross-domain request TODO get the ip address from

        * configration(ajax-cross-domain.properties)

        */

        response.setHeader("Access-Control-Allow-Origin", "*");

        response.setDateHeader("Expires", 0); // Proxies.

        PrintWriter writer = getWriter(response);

        writeAjaxJSONResponse(responseObj, writer);

    }

  /**

    *

    * @param response

    * @return

    */

    protected PrintWriter getWriter(HttpServletResponse response) {

        if(null == response){

            return null;

        }

        PrintWriter writer = null;

        try {

            writer = response.getWriter();

        } catch (IOException e) {

            logger.error("unknow exception", e);

        }

        return writer;

    }

    /**

    * description:send the ajax response back to the client side.

    *

    * @param responseObj

    * @param writer

    * @param writer

    */

    protected void writeAjaxJSONResponse(Object responseObj, PrintWriter writer) {

        if (writer == null || responseObj == null) {

            return;

        }

        try {        writer.write(JSON.toJSONString(responseObj,SerializerFeature.DisableCircularReferenceDetect));

        } finally {

            writer.flush();

            writer.close();

        }

    }

}

接下来就是我们自己业务的controller了,其中主要是要调用 writeAjaxJSONResponse(result, response);这个方法

?

1

2

3

4

5

6

7

8

9

10

11

@Controller

@RequestMapping(value = "/account")

public class AccountController extends BaseController {

@RequestMapping(value = "/add", method = RequestMethod.POST)

    public void addAccount(HttpSession session,HttpServletRequest request,HttpServletResponse response){

        ViewerResult result = new ViewerResult();

        //实现自己业务逻辑代码

        writeAjaxJSONResponse(result, response);

    }

}

?

1

2

3

4

好了,这种简单的方式就实现了。

接下来介绍第二种方式,filter。我们在写springMVC的时候,更喜欢的方式是通过@ResponseBody给返回对象进行封装直接返回给前端,这样简单而且容易。

如果使用@ResponseBody就不能使用第一种方法了,所有就使用filter给所有的请求都封装一下跨域,接下来直接实现代码:

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

import java.io.IOException;

import javax.servlet.Filter;

import javax.servlet.FilterChain;

import javax.servlet.FilterConfig;

import javax.servlet.ServletException;

import javax.servlet.ServletRequest;

import javax.servlet.ServletResponse;

import javax.servlet.http.HttpServletResponse;

public class HeadersCORSFilter implements Filter {

    @Override

    public void init(FilterConfig filterConfig) throws ServletException {

        // TODO Auto-generated method stub

    }

    @Override

    public void doFilter(ServletRequest request, ServletResponse servletResponse,

            FilterChain chain) throws IOException, ServletException {

        HttpServletResponse response = (HttpServletResponse) servletResponse;

            response.setHeader("Access-Control-Allow-Origin", "*");

            response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");

            response.setHeader("Access-Control-Max-Age", "3600");

            response.setHeader("Access-Control-Allow-Headers", "x-requested-with,Authorization");

            response.setHeader("Access-Control-Allow-Credentials","true");

            chain.doFilter(request, servletResponse);

    }

    @Override

    public void destroy() {

        // TODO Auto-generated method stub

    }

}

好了,filter实现了,然后就是要在web.xml里面把这个filter运用起来了。

打开项目的web.xml,填写下面的几行代码:

?

1

2

3

4

5

6

7

8

<filter>

  <filter-name>cors</filter-name>

  <filter-class>xxx.xxxx.xxxxx.xxxx.HeadersCORSFilter</filter-class><!--你过滤器的包 -->

</filter>

<filter-mapping>

  <filter-name>cors</filter-name>

  <url-pattern>/open/*</url-pattern><!-- 你开放的接口前缀  -->

</filter-mapping>

?

1

2

好了,通过上面的2种方式,可以解决百分之80的跨域问题,也许还有更好的解决方案,可以提出来大家一起学习学习。

最好的方案是最符合当前需求且易于扩展的。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,053评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,527评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,779评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,685评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,699评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,609评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,989评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,654评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,890评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,634评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,716评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,394评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,976评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,950评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,191评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,849评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,458评论 2 342

推荐阅读更多精彩内容