SpringBoot：处理跨域请求

1、跨域背景

1.1 何为跨域？

Url的通常格式：

协议 + 域名（子域名 + 主域名） + 端口号 + 资源地址

示例：

https://www.dustyblog.cn:8080/say/Hello 是由

https + www + dustyblog.cn + 8080 + say/Hello
组成。

只要协议，子域名，主域名，端口号这四项组成部分中有一项不一样，就能够认为是不一样的域，不一样的域之间互相访问资源，就被称之为跨域。

1.2 一次正常的请求

• Controller层代码：

@RequestMapping("/demo")
@RestController
public class CorsTestController {

    @GetMapping("/sayHello")
    public String sayHello() {
        return "hello world !";
    }
}

• 启动项目，测试请求

浏览器打开localhost:8080/demo/sayHello

能够打印出“hello world”

1.3 跨域测试

以Chrome为例：

• 打开任意网站，如：https://blog.csdn.net
• 按F12，打开【开发者工具】，在里面的【Console】能够直接输入js代码测试；

var token= "LtSFVqKxvpS1nPARxS2lpUs2Q2IpGstidMrS8zMhNV3rT7RKnhLN6d2FFirkVEzVIeexgEHgI/PtnynGqjZlyGkJa4+zYIXxtDMoK/N+AB6wtsskYXereH3AR8kWErwIRvx+UOFveH3dgmdw1347SYjbL/ilGKX5xkoZCbfb1f0=,LZkg22zbNsUoHAgAUapeBn541X5OHUK7rLVNHsHWDM/BA4DCIP1f/3Bnu4GAElQU6cds/0fg9Li5cSPHe8pyhr1Ii/TNcUYxqHMf9bHyD6ugwOFTfvlmtp6RDopVrpG24RSjJbWy2kUOOjjk5uv6FUTmbrSTVoBEzAXYKZMM2m4=,R4QeD2psvrTr8tkBTjnnfUBw+YR4di+GToGjWYeR7qZk9hldUVLlZUsEEPWjtBpz+UURVmplIn5WM9Ge29ft5aS4oKDdPlIH8kWNIs9Y3r9TgH3MnSUTGrgayaNniY9Ji5wNZiZ9cE2CFzlxoyuZxOcSVfOxUw70ty0ukLVM/78=";
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://127.0.0.1:8080/demo/sayHello');
xhr.setRequestHeader("x-access-token",token);
xhr.send(null);
xhr.onload = function(e) {
    var xhr = e.target;
    console.log(xhr.responseText);
}

• 输入完后直接按回车键就能够返回结果:

Access to XMLHttpRequest at 'http://127.0.0.1:8080/demo/sayHello' 
from origin 'https://blog.csdn.net' has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

该结果代表：该请求在https://blog.csdn.net域名下请求失败！

2、解决方案 - Cors跨域

2.1 Cors是什么

CORS全称为 Cross Origin Resource Sharing（跨域资源共享）, 每个页面须要返回一个名为 Access-Control-Allow-Origin的http头来容许外域的站点访问，你能够仅仅暴露有限的资源和有限的外域站点访问。

咱们能够理解为：若是一个请求须要容许跨域访问，则须要在http头中设置Access-Control-Allow-Origin来决定须要容许哪些站点来访问。如假设须要容许https://www.dustyblog.c这个站点的请求跨域，则能够设置：

Access-Control-Allow-Origin:https://www.dustyblog.cn。

2.2 方案一：使用@CrossOrigin注解

2.2.1 在Controller上使用@CrossOrigin注解

该类下的全部接口均可以经过跨域访问

@RequestMapping("/demo2")
@RestController
//@CrossOrigin //全部域名都可访问该类下全部接口
@CrossOrigin("https://blog.csdn.net") // 只有指定域名能够访问该类下全部接口
public class CorsTest2Controller {

    @GetMapping("/sayHello")
    public String sayHello() {
        return "hello world --- 2";
    }
}

这里指定当前的CorsTest2Controller中全部的方法能够处理https://csdn.net域上的请求,这里能够测试一下：

• 在https://blog.csdn.net页面打开调试窗口，输入(注意：这里请求地址是/demo2，请区别于1.2 案例中的/demo)

var token= "LtSFVqKxvpS1nPARxS2lpUs2Q2IpGstidMrS8zMhNV3rT7RKnhLN6d2FFirkVEzVIeexgEHgI/PtnynGqjZlyGkJa4+zYIXxtDMoK/N+AB6wtsskYXereH3AR8kWErwIRvx+UOFveH3dgmdw1347SYjbL/ilGKX5xkoZCbfb1f0=,LZkg22zbNsUoHAgAUapeBn541X5OHUK7rLVNHsHWDM/BA4DCIP1f/3Bnu4GAElQU6cds/0fg9Li5cSPHe8pyhr1Ii/TNcUYxqHMf9bHyD6ugwOFTfvlmtp6RDopVrpG24RSjJbWy2kUOOjjk5uv6FUTmbrSTVoBEzAXYKZMM2m4=,R4QeD2psvrTr8tkBTjnnfUBw+YR4di+GToGjWYeR7qZk9hldUVLlZUsEEPWjtBpz+UURVmplIn5WM9Ge29ft5aS4oKDdPlIH8kWNIs9Y3r9TgH3MnSUTGrgayaNniY9Ji5wNZiZ9cE2CFzlxoyuZxOcSVfOxUw70ty0ukLVM/78=";
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://127.0.0.1:8080/demo2/sayHello');
xhr.setRequestHeader("x-access-token",token);
xhr.send(null);
xhr.onload = function(e) {
    var xhr = e.target;
    console.log(xhr.responseText);
}

返回结果：

ƒ (e) {
    var xhr = e.target;
    console.log(xhr.responseText);
}
VM156:8 hello world --- 2

说明跨域成功！

• 换个域名测试一下看跨域是否还有效，在https://www.baidu.com按照上述方法测试一下，返回结果：

OPTIONS http://127.0.0.1:8080/demo2/sayHello 403
(anonymous)
Access to XMLHttpRequest at 'http://127.0.0.1:8080/demo2/sayHello' 
from origin 'http://www.cnblogs.com' has been blocked by CORS policy: 
Response to preflight request doesn't pass access control check: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

说明跨域失败！证实该方案成功指定了部分域名能跨域！

2.3 方案二：CORS全局配置-实现WebMvcConfigurer

• 新建跨域配置类：CorsConfig.java :

/**
 * 跨域配置
 */
@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Bean
    public WebMvcConfigurer corsConfigurer()
    {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**").
                        allowedOrigins("https://www.dustyblog.cn"). //容许跨域的域名，能够用*表示容许任何域名使用
                        allowedMethods("*"). //容许任何方法（post、get等）
                        allowedHeaders("*"). //容许任何请求头
                        allowCredentials(true). //带上cookie信息
                        exposedHeaders(HttpHeaders.SET_COOKIE).maxAge(3600L); //maxAge(3600)代表在3600秒内，不须要再发送预检验请求，能够缓存该结果
            }
        };
    }
}

• 测试，在容许访问的域名https://www.dustyblog.cn/控制台输入(注意，这里请求的是http://127.0.0.1:8080/demo3)：

var token= "LtSFVqKxvpS1nPARxS2lpUs2Q2IpGstidMrS8zMhNV3rT7RKnhLN6d2FFirkVEzVIeexgEHgI/PtnynGqjZlyGkJa4+zYIXxtDMoK/N+AB6wtsskYXereH3AR8kWErwIRvx+UOFveH3dgmdw1347SYjbL/ilGKX5xkoZCbfb1f0=,LZkg22zbNsUoHAgAUapeBn541X5OHUK7rLVNHsHWDM/BA4DCIP1f/3Bnu4GAElQU6cds/0fg9Li5cSPHe8pyhr1Ii/TNcUYxqHMf9bHyD6ugwOFTfvlmtp6RDopVrpG24RSjJbWy2kUOOjjk5uv6FUTmbrSTVoBEzAXYKZMM2m4=,R4QeD2psvrTr8tkBTjnnfUBw+YR4di+GToGjWYeR7qZk9hldUVLlZUsEEPWjtBpz+UURVmplIn5WM9Ge29ft5aS4oKDdPlIH8kWNIs9Y3r9TgH3MnSUTGrgayaNniY9Ji5wNZiZ9cE2CFzlxoyuZxOcSVfOxUw70ty0ukLVM/78=";
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://127.0.0.1:8080/demo3/sayHello');
xhr.setRequestHeader("x-access-token",token);
xhr.send(null);
xhr.onload = function(e) {
    var xhr = e.target;
    console.log(xhr.responseText);
}

输出结果

ƒ (e) {
    var xhr = e.target;
    console.log(xhr.responseText);
}
VM433:8 hello world --- 3

说明跨域成功，换个网址如https://www.baidu.com测试依旧出现须要跨域的错误提示，证实该配置正确，该方案测试经过。

2.3 拦截器实现

经过实现Fiter接口在请求中添加一些Header来解决跨域的问题

@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 {
    }
}

3、更多

3.1 源码地址

Github 示例代码

3.2 更多文章

1. 风尘博客
2. 风尘博客-博客园
3. 风尘博客-CSDN
4. 风尘博客-SegmentFault

3.3 技术交流

风尘博客公众号：