山东大学暑期项目实训第三周（1）

在项目的开发过程中，前后端交互时产生了跨域问题。

跨域问题产生的原因：

跨域是指a页面想获取b页面资源，如果a、b页面的协议、域名、端口、子域名不同，或是a页面为ip地址，b页面为域名地址，所进行的访问行动都是跨域的，而浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源。

在实际的代码运行中发现，因为前后端都在一台电脑上运行，后端在开启后占用了8080接口，导致前端代码运行之后，端口号自动加一，使得前后端的端口号不一致，最终导致了跨域问题的发生。

解决方案：

springboot跨域问题有以下几种解决方案：

1、直接采用SpringBoot的注解@CrossOrigin

Controller层在需要跨域的类或者方法上加上该注解即可。

2、处理跨域请求的Configuration

CrossOriginConfig.java
继承WebMvcConfigurerAdapter或者实现WebMvcConfigurer接口

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

/**
 * AJAX请求跨域
 * @author Mr.W
 * @time 2018-08-13
 */
@Configuration
public class CorsConfig extends WebMvcConfigurerAdapter {
    static final String ORIGINS[] = new String[] { "GET", "POST", "PUT", "DELETE" };
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**").allowedOrigins("*").allowCredentials(true).allowedMethods(ORIGINS)
                .maxAge(3600);
    }
}

3、采用过滤器的方式

 @Component
public class CORSFilter implements Filter {

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
            throws IOException, ServletException {
        HttpServletResponse res = (HttpServletResponse) response;
        res.addHeader("Access-Control-Allow-Credentials", "true");
        res.addHeader("Access-Control-Allow-Origin", "*");
        res.addHeader("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT");
        res.addHeader("Access-Control-Allow-Headers", "Content-Type,X-CAF-Authorization-Token,sessionToken,X-TOKEN");
        if (((HttpServletRequest) request).getMethod().equals("OPTIONS")) {
            response.getWriter().println("ok");
            return;
        }
        chain.doFilter(request, response);
    }
    @Override
    public void destroy() {
    }
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
    }
}

我先采用了最简单的在Controller层添加@CrossOrion，但是确没有解决跨域问题，最终我通过配置全局设置和使用@CrossOrion注释的方法解决了跨域问题。

配置一个Crosconfig

public class CrosConfig {
    @Configuration
    @EnableWebMvc
    public class CorsConfig implements WebMvcConfigurer {
        public void addCorsMappings(CorsRegistry registry) {
            //设置允许跨域的路径
            registry.addMapping("/**")
                    //设置允许跨域请求的域名
                    .allowedOrigins("*")
                    //这里：是否允许证书 不再默认开启
                    .allowCredentials(true)
                    //设置允许的方法
                    .allowedMethods("*")
                    //跨域允许时间
                    .maxAge(3600);
        }

    }
}

之后在每个Controller层的方法前添加@CrossOrion解决了跨域问题。