解决Angular与Java在get、post通信时的跨域问题

原因

跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。

广义的跨域：

1. 资源跳转： A链接、重定向、表单提交
2. 资源嵌入：<link>、<script>、<img>、<frame>等dom标签，还有样式中background:url()、@font-face()等文件外链
3. 脚本请求： js发起的ajax请求、dom和js对象的跨域操作等

其实我们通常所说的跨域是狭义的，是由浏览器同源策略限制的一类请求场景。

Angular

本次我使用的版本是Angular6 ，先把成功的代码贴出来：

  get(){
    this.http.get(`http://192.168.0.102:8080/PowerTable`).subscribe((data)=>{
      console.log(data);
    });
  }

前端的get请求不用正常发送就好。

  import { HttpClient, HttpHeaders } from "@angular/common/http"; //导入HttpClient和HttpHeaders

...//中间其他代码省略

  pointId = 1;								//定义参数
  httpOptions = {							//定义请求头
    headers: new HttpHeaders({
      "content-Type": "application/json"
    })
  };

  constructor(private http: HttpClient) { }//在构造函数中注入服务

...//中间其他代码省略

   this.http.post(`http://192.168.0.102:8080/PowerChart`,this.pointId,this.httpOptions).subscribe((data)=>{
   	 console.log(data);
   });

在Post请求中，应包含IP地址、参数、请求头三个，其中请求头需要注明用json数据格式。

Java

@RequestBody

作用：

1. 该注解用于读取Request请求的body部分数据，使用系统默认配置的HttpMessageConverter进行解析，然后把相应的数据绑定到要返回的对象上；

2. 再把HttpMessageConverter返回的对象数据绑定到 controller中方法的参数上。

使用时机：

A) GET、POST方式提时， 根据request header Content-Type的值来判断:

• application/x-www-form-urlencoded， 可选（即非必须，因为这种情况的数据@RequestParam, @ModelAttribute也可以处理，当然@RequestBody也能处理）；
• multipart/form-data, 不能处理（即使用@RequestBody不能处理这种格式的数据）；
• 其他格式， 必须（其他格式包括application/json, application/xml等。这些格式的数据，必须使用@RequestBody来处理）；

B) PUT方式提交时， 根据request header Content-Type的值来判断:

• application/x-www-form-urlencoded， 必须；
• multipart/form-data, 不能处理；
• 其他格式， 必须；

说明：

request的body部分的数据编码格式由header部分的Content-Type指定；

参考文献

https://www.cnblogs.com/jinhuazhe2013/p/5034532.html
https://blog.csdn.net/yyj108317/article/details/81735650?tdsourcetag=s_pctim_aiomsg
https://segmentfault.com/a/1190000011145364