spring boot 配合前端实现跨域

2016-12-30 21:32

一.方法:

  1. 服务端设置Respone Header头中Access-Control-Allow-Origin
  2. 配合前台使用jsonp
  3. 继承WebMvcConfigurerAdapter 添加配置类

二.实例:

1.前端:因为我们用了前后端分类前端用node服务器,用了ajax反向代理具体代码:

 app.all(apiRoot + '/*', proxy('127.0.0.1:' + proxyPort, {
    forwardPath: function(req, res) {
      console.log('req: ', req, 'res; ', res);
      return require('url').parse(req.url).path;
    }
  }));

后台(用的是spring boot 1.3.7.RELEASE) :用了一个filter进行了身份验证同时进行了跨域处理,具体代码:

public class AuthFilter implements Filter {
    // @Autowired
    //这个不能自动注入servlet和filter是被tomcat管理的
    private BaseUserService baseUserService;
    private String[] excludePaths;

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
        System.out.println("initFilter");
        //不能在初始化中通过Appliaction Context获取因为这时候还没初始化Application Context
        //baseUserService = SpringUtils.getBean("baseUserService", BaseUserService.class);
        excludePaths = new String[]{"/api/user/noLogin", "/api/user/tokenError", "/api/user/loginForeground",
                "/api/user/loginBackground", "/api/user/inCorrectUserId"};
    }

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
        HttpServletRequest httpServletRequest = (HttpServletRequest) request;
        HttpServletResponse httpServletResponse = (HttpServletResponse) response;
        //这里填写你允许进行跨域的主机ip
        httpServletResponse.setHeader("Access-Control-Allow-Origin", "*");
        //允许的访问方法
        httpServletResponse.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE, PATCH");
        //Access-Control-Max-Age 用于 CORS 相关配置的缓存
        httpServletResponse.setHeader("Access-Control-Max-Age", "3600");
        httpServletResponse.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
        String userId = request.getParameter("userId");
        String token = request.getParameter("token");
        //有token的 `
        if (userId != null && token != null) {
            try {
                Integer id = Integer.parseInt(userId);
                if (baseUserService == null)
                    baseUserService = SpringUtils.getBean("baseUserService", BaseUserService.class);
                int status = baseUserService.checkLogin(id, token);
                if (status == 1) {
                    chain.doFilter(request, response);
                } else if (status == 0) {
                    httpServletResponse.sendRedirect("/api/user/tokenError");
                } else if (status == -2) {
                    httpServletResponse.sendRedirect("/api/user/inCorrectUserId");
                } else {
                    httpServletResponse.sendRedirect("/api/user/noLogin");
                }
            } catch (NumberFormatException exception) {
                httpServletResponse.sendRedirect("/api/user/inCorrectUserId");
            }
        } else {
            String path = httpServletRequest.getServletPath();
            if (excludePath(path)) {
                chain.doFilter(request, response);
            } else {
                httpServletRequest.getRequestDispatcher("/api/user/noLogin").forward(request, response);
            }
        }
// ((HttpServletResponse) response).addHeader("Access-Control-Allow-Origin", "*");
// CorsFilter corsFilter=new CorsFilter();

    }

    private boolean excludePath(String path) {
        for (int i = 0; i < excludePaths.length; i++) {
            if (path.equals(excludePaths[i]))
                return true;
        }
        return false;
    }

    @Override
    public void destroy() {
        System.out.println("destroy method");
    }

}

这种方法还适用于servlet中,特别注意的是一定要在filter动作之前加上这句话,也就是在代码的最前面加上这个话。
跨域资源共享 CORS 详解(相关链接)
2.详细请看(点开)
3.具体代码:

package edu.ecnu.yjsy.conf;  

import org.springframework.context.annotation.Configuration;  
import org.springframework.web.servlet.config.annotation.CorsRegistry;  
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;  

@Configuration  
public class CorsConfig extends WebMvcConfigurerAdapter {  

    @Override  
    public void addCorsMappings(CorsRegistry registry) {  
        registry.addMapping("/**")  
                .allowedOrigins("*")  
                .allowCredentials(true)  
                .allowedMethods("GET", "POST", "DELETE", "PUT")  
                .maxAge(3600);  
    }  

}