跨域问题

2019-01-24  本文已影响43人  Cherry300

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

过滤拦截请求!!!

由于工程合作开发的需要,后台的应用要能支持跨域访问,但是在这个跨域访问“时好时坏”,我们这帮屌丝所知道的就是加上两个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的跨域问题,也许还有更好的解决方案,可以提出来大家一起学习学习。

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

上一篇下一篇

猜你喜欢

热点阅读