一个奇怪的跨域报错：未知错误，大部分由于后端不支持跨域CROS或无效配置引起的

原文链接：一个奇怪的跨域报错：未知错误，大部分由于后端不支持跨域CROS或无效配置引起的 – 每天进步一点点 (longkui.site)

0.背景

项目：前端angular，后端SpringMVC。

调试一个功能的时候开始报错：“未知Http failure response for xxxxxx : 0 Unknown Error”

然后，打开F12一看控制台出现一行：“未知错误，大部分由于后端不支持跨域CROS或无效配置引起的”

报错的这个接口所在的页面有很多接口，前台的请求都是类似：

/api/first/list
/api/first/ins
/api/second/add
...

其他接口都正常，只有某个接口报这个错。

2.问题原因排查

（1）前台配置的问题。有人说是proxy.config.json的问题，把这个文件加入下面这段代码：

{
"/":{
    "target":"http://xxxxx:8080",
    "secure":false,

    "changeOrigin":true

}

这段代码表示允许跨域，加上这段代码后，你调试程序的时候就能跨域了，但是在angular中只是表示调试的时候起作用，当你把前台代码打包成静态文件的时候，放到服务器上，这个proxy.config.json 这个文件并不起作用（我试过把target的地址指向百度打包发现项目正常运行）。

所以这个报跨域错误的代码并不是这个配置决定的。

（2）后台配置问题。有的文章中说，是后台web服务器配置导致的，需要在web服务器中加入一段代码。然后在web服务器中加入了允许跨域的配置，重启web服务器，发现还是一样报错。

其实想想，这点不现实，因为同一个后台，要报跨域问题应该所有的接口都报，而不应该只有一个页面的某个接口才报。

(3) 代码问题。不是配置的问题，大概率是代码的问题。看了看后台代码，平平无奇，类似于下面这样：

@RequestMapping(value = "/add", method = RequestMethod.POST)

@ResponseBody

public JSONObject add(@RequestBody Map<String,String> data){

.......

}

我用API工具单独请求这个接口，还是报错。

然后把代码改成GET方式，

这时请求前台的接口改成

@RequestMapping(value = "/add", method = RequestMethod.GET)

@ResponseBody

public JSONObject add( @RequestParam("age") String age){

.......

}

/api/second/add?age=12

这个时候还是报错。

于是改成另外一种形式

@RequestMapping(value = "/add/{id}", method = RequestMethod.GET)
@ResponseBody
public JSONObject add( @PathVariable("id") String id,){
    .......
}

请求的接口改成

/api/second/add/4335

这个时候接口成功返回数据了。

相对应的，把前台代码也改成这种形式，重新打包发布上线，线上功能一切正常。

3.总结

虽然问题解决了，但是还是不知道为什么只有这一个接口会报错，而且后台的写法和前台的写法都不是太奇特的写法。