起因

做PTP collector Monitoring 的时候WebStrom前端给IntelliJ Idea的后端请求数据的时候出现 No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:4200‘ is therefore not allowed access.
这种错误遇到很多次了，之前实习的时候做的web程序也会出现这样的错误。知道是cros的问题，当时为了快速fix，就用了jsonp，现在又遇了，自然是不能放过了.

探索

CROS(Cross-Origin resouce sharing), 允许browser向跨域server发出XMLHttpRequest请求，从而克服AJAX只能同源使用的限制

  1. 整个CROS通信过程对用户是透明的，和同源通信没有差别，浏览器会为CROS通信加一点头信息
  2. 两种请求
    • 简单请求:请求方法是HEAD|GET|POST; HTTP头信息不超过以下几种字段: Accept, Accept-Language, Content-Language, Last-event-ID, Content-Type是 appliaction/x-www.form-urlencoded|multipart/form-data|text/plain
    • 非简单请求:不满足简单请求的条件。
  3. 对于简单请求，浏览器直接发出CROS请求，header增加一个Origin字段。如果Origin 指定的源不再许可范围内，服务器会返回一个正常的HTTP回应，但是回应的头信息没有包含Access-Control-Allow-Origin 字段就知道出错了
  4. 对于非简单请求，会在正式通信之前增加一次HTTP 查询请求，称为“预检”请求。主要是询问服务器，origin是否在许可范围内。得到肯定回复后，才会发正式的cros请求，否则报错.

方案

只要在server端配置好允许cross就行了。现在用的是sprintboot，参考下面的配置

1
2
3
4
5
6
@CrossOrigin
@RequestMapping(value="Ids", method= RequestMethod.GET)
@ResponseBody
public List<ResourceUsage>getResourceUsageForAllApplicationIds(){
	
}

附上两张对比图，一张允许CrossOrigin, 一张不允许

allow CrossOrigin

CrossOrigin not allowed

Reference

阮一峰