上一小节中，我们还存在一个问题未处理，就是跨域访问问题。针对跨域问题的解决方式有很多种，从大的方向可分为：客户端代理请求和服务器端跨域请求的处理。

客户端代理请求

配置 proxy

位置：config/proxy.ts，通过proxy可以配置运行环境、生产环境、测试环境的跨域代理请求。
image.png

  • step1 设置了需要代理的请求头，比如这里定义了 /api ，当你访问如 /api/abc 这样子的请求，就会触发代理
  • step2 设置代理的目标，即真实的服务器地址
  • changeOrigin 设置是否跨域请求资源
  • pathRewrite 表示是否重写请求地址，比如这里的配置，就是把 /api 替换成空字符

注意，配置的主入口是config.ts，可以在config.ts中看到对proxy的引入。
image.png

请求地址的处理

在上面的proxy的配置中我们了解到，我们所有的请求都是以/api开头的请求路径（处理跨域），那么细心的小伙伴肯定在上一小节中就发现，我们请求的路径并没有拼接/api ,以角色service.ts 为例：
image.png
通过上面的请求中，我们并没有拼接/api，那么我们是如何处理的呢？
细心的小伙伴已经发现了，我们在request.ts中配置了请求地址的前缀。
image.png

服务器端处理跨域

此处我们以springboot为案例。

四种解决方式：
①：返回新的CorsFilter
②：重写WebMvcConfigurer
③：使用注解@CrossOrigin
④：手动设置响应头（HttpServletResponse）
CorFilter / WebMvConfigurer / @CrossOrigin 需要 SpringMVC 4.2以上版本才支持，对应springBoot 1.3版本以上
上面前两种方式属于全局 CORS 配置，后两种属于局部 CORS配置。如果使用了局部跨域是会覆盖全局跨域的规则，所以可以通过 @CrossOrigin 注解来进行细粒度更高的跨域资源控制。
其实无论哪种方案，最终目的都是修改响应头，向响应头中添加浏览器所要求的数据，进而实现跨域

配置CorsFilter(全局跨域)

  1. import org.springframework.boot.SpringBootConfiguration;
  2. import org.springframework.context.annotation.Bean;
  3. import org.springframework.web.cors.CorsConfiguration;
  4. import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
  5. import org.springframework.web.filter.CorsFilter;
  7. /**
  8.  * @Author qingfeng
  9.  * @Email 964754975@qq.com
  10.  * @Date 2021/5/10 17:07
  11.  * @Description 
  12.  */
  13. @SpringBootConfiguration
  14. public class WebGlobalConfig {
  16.     @Bean
  17.     public CorsFilter corsFilter() {
  19.         //创建CorsConfiguration对象后添加配置
  20.         CorsConfiguration config = new CorsConfiguration();
  21.         //设置放行哪些原始域
  22.         config.addAllowedOrigin("*");
  23.         //放行哪些原始请求头部信息
  24.         config.addAllowedHeader("*");
  25.         //暴露哪些头部信息
  26.         config.addExposedHeader("*");
  27.         //放行哪些请求方式
  28.         config.addAllowedMethod("GET");     //get
  29.         config.addAllowedMethod("PUT");     //put
  30.         config.addAllowedMethod("POST");    //post
  31.         config.addAllowedMethod("DELETE");  //delete
  32.         //corsConfig.addAllowedMethod("*");     //放行全部请求
  34.         //是否发送Cookie
  35.         config.setAllowCredentials(true);
  37.         //2. 添加映射路径
  38.         UrlBasedCorsConfigurationSource corsConfigurationSource =
  39.                 new UrlBasedCorsConfigurationSource();
  40.         corsConfigurationSource.registerCorsConfiguration("/**", config);
  41.         //返回CorsFilter
  42.         return new CorsFilter(corsConfigurationSource);
  43.     }
  44. }

如果你使用的是高版本SpringBoot2.4.4则需要改动一下，否则后台报错
java.lang.IllegalArgumentException: 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.
at org.springframework.web.cors.CorsConfiguration.validateAllowCredentials(CorsConfiguration.java:453) ~[spring-web-5.3.6.jar:5.3.6]
当allowCredentials为true时，alloedOrigins不能包含特殊值“”，因为该值不能在“Access-Control-Allow-Origin”响应头部中设置。要允许凭据访问一组来源，请显式列出它们或考虑改用“AllowedOriginPatterns”。
解决：把 config.addAllowedOrigin(““); 替换成 config.addAllowedOriginPattern(““);

重写WebMvcConfigurer（全局跨域）

  1. import org.springframework.boot.SpringBootConfiguration;
  2. import org.springframework.web.servlet.config.annotation.CorsRegistry;
  3. import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
  5. /**
  6.  * @Author qingfeng
  7.  * @Email 964754975@qq.com
  8.  * @Date 2021/5/10 17:49
  9.  * @Description
  10.  */
  11. @SpringBootConfiguration
  12. public class CorsConfig implements WebMvcConfigurer {
  13.     @Override
  14.     public void addCorsMappings(CorsRegistry registry) {
  15.         //添加映射路径
  16.         registry.addMapping("/**")
  17.                 //是否发送Cookie
  18.                 .allowCredentials(true)
  19.                 //设置放行哪些原始域   SpringBoot2.4.4下低版本使用.allowedOrigins("*")    
  20.                 .allowedOriginPatterns("*")
  21.                 //放行哪些请求方式
  22.                 .allowedMethods(new String[]{"GET", "POST", "PUT", "DELETE"})
  23.                 //.allowedMethods("*") //或者放行全部
  24.                 //放行哪些原始请求头部信息
  25.                 .allowedHeaders("*")
  26.                 //暴露哪些原始请求头部信息
  27.                 .exposedHeaders("*");
  28.     }
  29. }

使用注解@CrossOrigin（局部跨域）

这种方式是我比较喜欢用的，那个controller需要解决跨域，则加入@CrossOrigin注解。

  1. @Target({ElementType.TYPE, ElementType.METHOD})
  2. @Retention(RetentionPolicy.RUNTIME)
  3. @Documented
  4. public @interface CrossOrigin {
  5.     //这origins和value是一样的
  6.     //允许来源域名的列表，例如 'www.jd.com'，匹配的域名是跨域预请求 Response 头中的'Access-Control-Aloow_origin' 
  7.     //字段值。不设置确切值时默认支持所有域名跨域访问。
  8.     @AliasFor("origins")
  9.     String[] value() default {};
  10.     @AliasFor("value")
  11.     String[] origins() default {};
  12.     //高版本下Spring2.4.4使用originPatterns 而不是value 和 origins
  13.     String[] originPatterns() default {};
  15.     //跨域请求中允许的请求头中的字段类型， 该值对应跨域预请求 Response 头中的 'Access-Control-Allow-Headers' 字段值。
  16.     //不设置确切值默认支持所有的header字段（Cache-Controller、Content-Language、Content-Type、
  17.     //Expires、Last-Modified、Pragma）跨域访问
  18.     String[] allowedHeaders() default {};
  20.     //跨域请求请求头中允许携带的除Cache-Controller、Content-Language、Content-Type、Expires、Last-Modified、
  21.     //Pragma这六个基本字段之外的其他字段信息，对应的是跨域请求 Response 头中的 'Access-control-Expose-Headers'字段值
  22.     String[] exposedHeaders() default {};
  24.     //跨域HTTP请求中支持的HTTP请求类型（GET、POST...），不指定确切值时默认与 Controller 方法中的 methods 字段保持一致。
  25.     RequestMethod[] methods() default {};
  27.     //该值对应的是是跨域请求 Response 头中的 'Access-Control-Allow-Credentials' 字段值。
  28.     //浏览器是否将本域名下的 cookie 信息携带至跨域服务器中。默认携带至跨域服务器中，但要实现 cookie 
  29.     //共享还需要前端在 AJAX 请求中打开 withCredentials 属性。
  30.     String allowCredentials() default "";
  32.     //该值对应的是是跨域请求 Response 头中的 'Access-Control-Max-Age' 字段值，表示预检请求响应的缓存持续的最大时间，
  33.     //目的是减少浏览器预检请求/响应交互的数量。默认值1800s。设置了该值后，浏览器将在设置值的时间段内对该跨域请求不再发起预请求
  34.     long maxAge() default -1;
  35. }

1、在控制器（类上）使用@CrossOrigin注解，表示该类的所有方法允许跨域

  1. @Controller
  2. @RequestMapping("/shop")
  3. @CrossOrigin(originPatterns = "*", methods = {RequestMethod.GET, RequestMethod.POST})
  4. public class ShopController {
  6.     @GetMapping("/")
  7.     @ResponseBody
  8.     public Map<String, Object> findAll() {
  9.         //返回数据
  10.         return DataSchool.getStudents();
  11.     }
  12. }

2、我们也可以设置更小的粒度，在方法上设置跨域

  1. @Controller
  2. @RequestMapping("/shop")
  3. public class ShopController {
  5.     @GetMapping("/")
  6.     @ResponseBody
  7.     //更小的解决跨域 设置只能某些地址访问
  8.     @CrossOrigin(originPatterns = "http://localhost:8080")
  9.     public Map<String, Object> findAll() {
  10.         //返回数据
  11.         return DataSchool.getStudents();
  12.     }
  13. }

手动设置响应头（HttpServletResponse）

其实服务端解决跨域特别简单，但是极不推荐，我们只要在服务端请求的资源里面添加一个响应头，并设置任何访问都可以被受理并发送
proxy 请求代理 - 图5
此时我们执行客户端代码就会发现不会报错跨域问题错误了，我们在前端的Ajax调用之后加一个打印会发现可以把数据获取到，但是不推荐这么写
proxy 请求代理 - 图6