【spring跨域问题处理】

蛋炒喜红柿

已于 2022-05-23 10:54:18 修改

阅读量1.9k

点赞数 2

分类专栏： spring 文章标签：跨域

于 2022-03-08 17:26:37 首次发布

本文链接：https://blog.csdn.net/W664160450/article/details/123358088

版权

spring 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1. 什么是跨域？

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。
所谓同源是指，域名，协议，端口均相同，不明白没关系，举个栗子：
http://www.123.com/index.html 调用 http://www.123.com/server.php （非跨域）

http://www.123.com/index.html 调用 http://www.456.com/server.php （主域名不同:123/456，跨域）

http://abc.123.com/index.html 调用 http://def.123.com/server.php （子域名不同:abc/def，跨域）

http://www.123.com:8080/index.html 调用 http://www.123.com:8081/server.php （端口不同:8080/8081，跨域）

http://www.123.com/index.html 调用 https://www.123.com/server.php （协议不同:http/https，跨域）

请注意：localhost和127.0.0.1虽然都指向本机，但也属于跨域。

浏览器执行javascript脚本时，会检查这个脚本属于哪个页面，如果不是同源页面，就不会被执行。

2. 为什么浏览器要限制跨域访问呢？

原因就是安全问题：如果一个网页可以随意地访问另外一个网站的资源，那么就有可能在客户完全不知情的情况下出现安全问题。比如下面的操作就有安全问题：

用户访问www.mybank.com ，登陆并进行网银操作，这时cookie啥的都生成并存放在浏览器
用户突然想起件事，并迷迷糊糊地访问了一个邪恶的网站 www.xiee.com
这时该网站就可以在它的页面中，拿到银行的cookie，比如用户名，登陆token等，然后发起对www.mybank.com 的操作。
如果这时浏览器不予限制，并且银行也没有做响应的安全处理的话，那么用户的信息有可能就这么泄露了。

3. 为什么要跨域

既然有安全问题，那为什么又要跨域呢？有时公司内部有多个不同的子域，比如一个是location.company.com ,而应用是放在app.company.com , 这时想从 app.company.com去访问 location.company.com 的资源就属于跨域。

4. SpringBoot 实现前后端分离的跨域访问（CORS）

1. 基本介绍

简单来说，CORS是一种访问机制，英文全称是Cross-Origin Resource Sharing，即我们常说的跨域资源共享，通过在服务器端设置响应头，把发起跨域的原始域名添加到Access-Control-Allow-Origin 即可。

1.1 CORS工作原理

CORS实现跨域访问并不是一蹴而就的，需要借助浏览器的支持，从原理题图我们可以清楚看到，简单的请求（通常指GET/POST/HEAD方式，并没有去增加额外的请求头信息）直接创建了跨域请求的XHR对象，而复杂的请求则要求先发送一个"预检"请求，待服务器批准后才能真正发起跨域访问请求。
在这里插入图片描述
根据官方文档W3C规范-CORS 的描述，目前CORS使用了如下头部信息：

1.2 Request Headers（请求头)

温馨提示：Request Headers 无需人为干预，因为浏览器会自动识别跨域请求并添加对应的请求头。

Origin 表示发起跨域请求的原始域。
Access-Control-Request-Method 表示发起跨域请求的方式，例如GET/POST。
Access-Control-Request-Headers表示发起跨域请求的额外头信息。

1.3 Response headers（响应头）

温馨提示：Response Headers 需要人为干预，通过设置响应头以帮助服务器资源进行跨域授权，例如允许哪些原始域进行跨域请求，是否允许响应信息携带Cookie等认证信息。
+Access-Control-Allow-Origin 表示允许哪些原始域进行跨域访问。

Access-Control-Allow-Credentials表示是否允许客户端获取用户凭据。
Access-Control-Allow-Methods 表示允许哪些跨域请求的提交方式。（例如GET/POST）
Access-Control-Allow-Headers 表示跨域请求的头部的允许范围。
Access-Control-Expose-Headers 表示允许暴露哪些头部信息给客户端。

使用说明：基于安全考虑，如果没有设置额外的暴露，跨域的通信对象XMLHttpRequest只能获取标准的头部信息。

Access-Control-Max-Age 表示预检请求 [Preflight Request] 的最大缓存时间

2.CORS实现跨域访问

授权方式

方式1：返回新的CorsFilter
方式2：重写WebMvcConfigurer
方式3：使用注解（@CrossOrigin）
方式4：手工设置响应头（HttpServletResponse ）

注：CorsFilter / WebMvcConfigurer / @CrossOrigin 需要SpringMVC 4.2 以上的版本才支持，对应SpringBoot 1.3 版本以上都支持这些CORS特性。不过，使用SpringMVC4.2 以下版本的小伙伴也不用慌，直接使用方式4通过手工添加响应头来授权CORS跨域访问也是可以的。附：在SpringBoot 1.2.8 + SpringMVC 4.1.9 亲测成功。

注：方式1和方式2属于全局CORS配置，方式3和方式4属于局部CORS配置。如果使用了局部跨域是会覆盖全局跨域的规则，所以可以通过@CrossOrigin注解来进行细粒度更高的跨域资源控制。

1. 返回新的CorsFilter（全局跨域）

在任意配置类，返回一个新的CorsFilter Bean，并添加映射路径和具体的CORS配置信息。
使用过滤器做跨域处理，跨域处理的过滤器要处于所有的过滤器中的第一个。

package com.hehe.yyweb.config;

@Configuration
public class GlobalCorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        //1.添加CORS配置信息
        CorsConfiguration config = new CorsConfiguration();
          //放行哪些原始域
          config.addAllowedOrigin("*");
          //是否发送Cookie信息
          config.setAllowCredentials(true);
          //放行哪些原始域(请求方式)
          config.addAllowedMethod("*");
          //放行哪些原始域(头部信息)
          config.addAllowedHeader("*");
          //暴露哪些头部信息（因为跨域访问默认不能获取全部头部信息）
          config.addExposedHeader("*");

        //2.添加映射路径
        UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
        configSource.registerCorsConfiguration("/**", config);

        //3.返回新的CorsFilter.
        return new CorsFilter(configSource);
    }
}

注意：使用过滤器进行跨域处理的时候，有时候会出现一个问题（目测是springboot的版本的问题，项目从springboot-2.2.6切换成2.4.2就出现了这个问题）：

 When allowCredentials is true, allowedOrigins cannot contain the special value "*"since that cannot be set on the "Access-Control-Allow-Origin" response header. To allow credentials to a set of origins, list them explicitly or consider using "allowedOriginPatterns" instead.

本质上还是跨域的问题没有处理好:

需要把 config.addAllowedOrigin("*");修改成config.addAllowedOriginPattern("*");

2. 重写WebMvcConfigurer（全局跨域）

在任意配置类，返回一个新的WebMvcConfigurer Bean，并重写其提供的跨域请求处理的接口，目的是添加映射路径和具体的CORS配置信息。

package com.hehe.yyweb.config;

@Configuration
public class GlobalCorsConfig {
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            //重写父类提供的跨域请求处理的接口
            public void addCorsMappings(CorsRegistry registry) {
                //添加映射路径
                registry.addMapping("/**")
                        //放行哪些原始域
                        .allowedOrigins("*")
                        //是否发送Cookie信息
                        .allowCredentials(true)
                        //放行哪些原始域(请求方式)
                        .allowedMethods("GET","POST", "PUT", "DELETE")
                        //放行哪些原始域(头部信息)
                        .allowedHeaders("*")
                        //暴露哪些头部信息（因为跨域访问默认不能获取全部头部信息）
                        .exposedHeaders("Header1", "Header2");
            }
        };
    }
}

3. 使用注解（局部跨域）

在方法上（@RequestMapping）使用注解 @CrossOrigin ：

@RequestMapping("/hello")
@ResponseBody
@CrossOrigin("http://localhost:8080") 
public String index( ){
    return "Hello World";
}

或者在控制器（@Controller）上使用注解 @CrossOrigin ：

@Controller
@CrossOrigin(origins = "http://xx-domain.com", maxAge = 3600)
public class AccountController {

    @RequestMapping("/hello")
    @ResponseBody
    public String index( ){
        return "Hello World";
    }
}

4. 手工设置响应头（局部跨域）

使用HttpServletResponse对象添加响应头（Access-Control-Allow-Origin）来授权原始域，这里Origin的值也可以设置为"*" ，表示全部放行

@RequestMapping("/hello")
@ResponseBody
public String index(HttpServletResponse response){
    response.addHeader("Access-Control-Allow-Origin", "http://localhost:8080");
    return "Hello World";
}

5. SpringBoot 实现前后端分离的跨域访问（Nginx）

使用Nginx反向代理，可以解决跨域无权和Session丢失的问题，十分方便。下面我们以前后端分离为案例，展开Nginx的使用教程。

一. 配置和启动Nginx

下载地址

Nginx下载传送门：Nginx Stable Version Download

注意事项：下载之后，记得解压到全英文路径，避免中文路径导致Nginx启动失败。

修改配置
打开nginx.conf ，清空配置项，然后将下面的配置信息原封不动拷贝进去：

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    keepalive_timeout  65;

    #前端页面服务器
    server {
        #监听端口和域名
        listen       7000; 
        server_name  localhost;

        #添加头部信息
        proxy_set_header Cookie $http_cookie;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        
        #添加拦截路径和代理地址
        location /api/ {              
               proxy_pass http://localhost:8080/;  #注意：使用代理地址时末尾记得加上斜杠"/"。      
        }
        
        #添加拦截路径和根目录
        location / {
               root   html/hehe;  #注意：使用"/"拦截全路径的时候记得放在最后。
               index  index.html index.htm;  #index表示首页 
        }           
        
    }
}

快速启动
在Windows 环境中：

快速启动Nginx：右键管理员模式，运行nginx.exe。
快速关闭Nginx：在nginx主目录，添加关闭Nginx的命令。

其中结束Nginx.bat的具体内容如下：

taskkill /f /im nginx.exe

在这里插入图片描述

二. 部署前端页面

前后端分离后，可以直接将静态资源（例如前端页面）部署到Nginx的html目录。这里我们在$nginx_home/html目录下创建一个名为hehe的文件夹，并添加一个页面（index.html）用于跨域访问测试，index页面内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Page Index</title>
</head>
<body>
<h2>前台系统7000</h2>
<p id="info1"></p>
<p id="info2"></p>
</body>

<script src="js/jquery.js"></script>
<script>
        $.ajax({
            url: 'http://localhost:7000/api/user/login/verifyCode',
            type: "POST",
            success: function (data) {
                //1.获取验证码
                $("#info1").html("跨域访问成功:verifyCode:" + data);
                //2.核对验证码
                $.ajax({
                    url: 'http://localhost:7000/api/user/login/checkVerifyCode',
                    type: "POST",
                    success: function (data) {
                        $("#info2").html("跨域访问成功:checkVerifyCode:" + data);
                    }
                });
            },
            error: function (data) {
                $("#info1").html("跨域失败!!");
            }
        });
</script>

</html>

三. 启动后端系统

首先在POM文件添加Web依赖，然后编写控制层，提供对外的访问接口。默认启动端口是8080.

package com.hehe;

@SpringBootApplication
@RestController
@RequestMapping("/user/login/*")
public class SpringBootNginxApplication {
    //在拦截器打印访问URL
    @Bean
    public WebMvcConfigurer webMvcConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addInterceptors(InterceptorRegistry registry) {
                registry.addInterceptor(new HandlerInterceptor() {
                    @Override
                    public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, @Nullable Exception ex) throws Exception {
                        if(response.getStatus()/100>=4){
                            System.err.println("访问URL:"+request.getAttribute(WebUtils.ERROR_REQUEST_URI_ATTRIBUTE));
                        }else {
                            System.out.println("访问URL:"+request.getRequestURI());
                        }
                    }
                });
            }
        };
    }


    //提供验证码
    @RequestMapping("verifyCode")
    public String verifyCode(HttpServletRequest request) {
        request.getSession().setAttribute("verifyCode", "N7GX");
        return request.getSession().getId() + ":" + request.getSession().getAttribute("verifyCode");
    }

    //核对验证码
    @RequestMapping("checkVerifyCode")
    public String checkVerifyCode(HttpServletRequest request) {
        return request.getSession().getId() + ":" + request.getSession().getAttribute("verifyCode");
    }

    public static void main(String[] args) {
        SpringApplication.run(SpringBootNginxApplication.class, args);
    }
}

四. 测试跨域访问

打开浏览器，访问 http://localhost:7000/api/user/login/verifyCode ，可以看到后台获取的Session和第一次生成的验证码。如图:
在这里插入图片描述
打开浏览器，访问 http://localhost:7000/api/user/login/checkVerifyCode ，可以看到后台获取的Session和第二次取出的验证码。

由上图可以看到，跨域访问成功，并且Session没有丢失。

五. Nginx跨域总结

Nginx VS CORS
简单来说，Nginx是间接跨域，而CORS则实现了直接跨域。Nginx的反向代理“欺诈了”浏览器，所以浏览器和服务器都认为是同源访问，所以Session不会丢失。（PS：如果发生跨域访问，服务器会每次都创建新的Session，所以才造成了前后端分离的Session丢失问题。）至于CORS这种跨域机制的安全性和灵活性更高，但需要自己解决跨域访问Session丢失的问题，通常情况可以采用Session+Redis来实现Session共享。）

Nginx跨域实现过程:
第1步：http://localhost:7000/index.html
第2步：http://localhost:7000/api/user/login/verifyCode

第1步是打开页面，第2步是在这个页面发起AJAX请求，并且请求的域名端口均与当前访问页面相同，属于同源操作，所以浏览器不会报出跨域禁止的错误。

第3步：http://localhost:8080/user/login/verifyCode

第3步是本案例最为关键的一步，真正的跨域操作由Nginx的proxy_pass进行完成，并成功将验证码信息以代理的身份返回给浏览器，让浏览器处于同源访问后台的错觉。打开F12可以看到代理服务器：
在这里插入图片描述
关于proxy_pass 斜杠"/’ 的坑

通常情况下，建议大家在代理地址末尾加上"/" ，表示转发后就是proxy_pass直接拼接映射路径。

Nginx代理效果

转发前URL：http://localhost:7000/api/user/login/verifyCode
转发后URL：http://localhost:8080/hehe/user/login/verifyCode

server {
    listen       7000; 
    server_name  localhost;

    #正确示范: 末尾加斜杠"/"
    location /api/ {              
        proxy_pass http://localhost:8080/hehe/; 
    }

}

如果代理地址末尾没有加斜杠的话，表示转发后也是proxy_pass直接拼接映射路径，但是，拼接的时候会少了个"/"，这样会引发访问路径错误。

Nginx代理效果：
转发前URL：http://localhost:7000/api/user/login/verifyCode
转发后URL：http://localhost:8080/heheuser/login/verifyCode

server {
    listen       7000; 
    server_name  localhost;

    #错误示范: 末尾无斜杠
    location /api/ {              
        proxy_pass http://localhost:8080/hehe; 
    }
}

为了更方便大家，看到在Nginx调整了proxy_pass有无斜杠的区别，楼主在控制台打印了每次请求访问的URL地址，这样更加清晰：
具体做法：关闭Nginx 将代理地址修改为：proxy_pass http://localhost:8080/hehe ，然后启动Nginx，在浏览器访问http://localhost:7000/api/user/login/verifyCode，然后查看控制台打印的URL信息。清楚的看到了因为少了斜杠而导致拼接成错误路径，如下：
在这里插入图片描述