CORS跨域访问

CORS（Cross-Origin Resource Sharing）“跨域资源共享”，是一个W3C标准，它允许浏览器向跨域服务器发送Ajax请求，打破了Ajax只能访问本站内的资源限制，CORS在很多地方都有被使用，微信支付的JS支付就是通过JS向微信服务器发送跨域请求。开放Ajax访问可被跨域访问的服务器大大减少了后台开发的工作，前后台工作也可以得到很好的明确以及分工，下面我们就看讲一下如何让你的SpringBoot项目支持CORS跨域。

2 跨域问题的解决方案

2.1 jsonp

    jsonp应该是最早的跨域问题解决方案了，它可以解决部分跨域问题，但是有其缺点。一个比较明显的缺点实只能发送GET请求，即使是在ajax中配置的是POST请求，但如果是使用的jsonp，也会将POST请求转为GET请求；另外，使用jsonp也需要后台服务的支持。

2.2 使用nginx

    之前在做一个项目前后端联调时有用过nginx反向代理解决跨域问题。使用nginx解决跨域问题的思想是让nginx去代理后端的服务，并提供与前端域名相同的访问入口，这样让前端的JS“看起来”访问的是自己的ip与端口，但实际上由于nginx做了代理，其最后真正访问的是另一个地址。nginx也是目前非常流行的反向代理与负载均衡的服务器，许多互联网项目中会用到它，当然解决跨域问题只是其功能的一部分。

2.3 CORS

    CORS（Cross-origin resource sharing）是一个W3C标准，全称为“跨域资源共享”，是目前最为流行的跨域解决方案，配置简单，使用方便，下面详细介绍一下这个CORS。

CORS 对比 JSONP

都能解决 Ajax直接请求普通文件存在跨域无权限访问的问题
JSONP只能实现GET请求，而CORS支持所有类型的HTTP请求
使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理
JSONP主要被老的浏览器支持，它们往往不支持CORS，而绝大多数现代浏览器都已经支持了CORS

使用 CORS 的场景

（1）协议不同，比如https://www.blog.csdn.net与http://www.bog.csdn.net；

（2）域名不同，比如www.baidu.com与www.qq.com；

（3）端口不同，比如www.csdn.com:8089与www.csdn.com:8080；

（4）二级域名不同，blog.csdn.net与mp.csdn.net.

一：简单的自定义CORSFilter

在Spring Boot中，还可以通过全局配置一次性解决这个问题，全局配置只需要在配置类中重写addCorsMappings方法即可，如下：



@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
        .allowedOrigins("http://localhost:8081")
        .allowedMethods("*")
        .allowedHeaders("*");
    }
}


/**表示本应用的所有方法都会去处理跨域请求，allowedMethods表示允许通过的请求数，allowedHeaders则表示允许的请求头。经过这样的配置之后，就不必在每个方法上单独配置跨域了。

Filter
除了上面方法外，也可以使用过滤器。我们创建一个CorsFilter 类，内容如下：

@Slf4j
@Component
public class CorsFilter implements Filter {
    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse)servletResponse;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, client_id, uuid, Authorization");
        response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate");
        response.setHeader("Pragma", "no-cache");
        filterChain.doFilter(servletRequest,response);
    }
}

上面代码中设置response.setHeader(“Access-Control-Allow-Origin”, “*”);表示所有的地址都可以访问项目接口。