解决了 一半的跨源/跨域 问题

Question

跨源/跨域问题，解决了一半 ？

• 我的开发环境：
  使用VS Code开发前端代码，前端使用了Angular6
  后端是SpringBoot + Mybatis 的Java项目
  前后端都我一个人在一台电脑上开发的

• 前端的Angular代码中使用HttpClient发送请求获取数据，新增的请求是：

  var requestUrl = 'http://localhost:8085/femis/unitInsertSimple/'+ unit;
  this.http
      .get(requestUrl)
      .subscribe(data=>this.searchData());//searchData()是获取全部数据的方法

  后面拼接的unit是string类型，Java端接受该请求的Controller中的代码是：

      @GetMapping("/unitInsertSimple/{unit}")
      public String insert(@PathVariable("unit") String unit) {
          return service.insert(unit);
      }

  该Controller类的头上使用了注解：@CrossOrigin，和注解@RestController
  上面的新增请求测试通过的，成功向DB中添加了一笔数据

• 下面说说有问题的请求 - 修改请求 ：
  Angular中的修改请求是：

  var requestUrl = 'http://localhost:8085/femis/unitUpdateByPrimaryKey/' + model;
  this.http.get(requestUrl).subscribe(data=>this.searchData());

  url中后面拼接的model是模型对象，其代码是：

  export class Unit {
    constructor(
      public sId:string    
    ){}
  }

  Java端处理该请求的方法是：

      @GetMapping("/unitUpdateByPrimaryKey/{unit}")
      public String updateByPrimaryKey(@PathVariable("unit") Unit unit) {
          return service.updateByPrimaryKey(unit);
      }

  上面 的Java代码中的Unit是模型类，执行修改请求在浏览器中报错如下：

  已拦截跨源请求：同源策略禁止读取位于 http://localhost:8085/femis/unitUpdateByPrimaryKey/[object%20Object] 的远程资源。（原因：CORS 头缺少 'Access-Control-Allow-Origin'）。
  

• 我的疑惑：
  上面说的新增请求和修改请求是在一个ts文件 中，新增请求可以正常执行，怎么到了 修改请求就报跨源错误了？？
  难道和请求后面拼接的参数有关？（新增请求后面拼接的 是string类型，修改请求后面拼接的是对象）

• 希望得到的帮助：

  1. 解决上面的修改请求中出现的跨源错误
  2. get请求中url后面拼接对象是像我上面的 代码一样直接跟着对象变量就好了？正确的格式应该是什么样子的
  3. 如果get请求中不适合传送对象，那么应该采用post方法？如果是那么 post方法传递对象我应该 怎么写？
     原谅我是WEB开发的小白。
• 有必要的话：
  我 的 联系方式：[e-mail] 前面 的 数字就是我的QQ号，加我的话请注明 ：跨源，怕自己忽略掉，一定要 加 注明哦。

Answer 1

其实是问题钻了牛角尖了，不一定非要请求路径中追加对象，使用表单来提交就好了。本贴到此为止吧，要看angular6+antd+java+springmvc如何提交表单数据并自动封装为bean请看：
https://segmentfault.com/q/10...

Answer 2

angular2以后就没有用过了，下面的说明可以参考一下：

1：解决上面的修改请求中出现的跨源错误：我使用的是springboot 2.*添加了一个跨域配置，如果使用HTTP.OPTION请求返回200说明配置成功了

@Configuration
public class AppConfiguration {
    @Bean
    public FilterRegistrationBean corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(false);
        config.addAllowedOrigin("*");
        config.addAllowedHeader("*");
        config.addAllowedMethod("*");
        source.registerCorsConfiguration("/**", config);
        FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
        bean.setOrder(0);
        return bean;
    }
}

2和3. 太复杂的还是用post或者遵循rest，如果一定要用get发送一个对象，需要用JSON转化成字符串，但是真的不够优雅。