什么是HTTP跨域访问异常？

HTTP跨域访问异常（Cross-Origin Resource Sharing，简称CORS）是指在发送 Ajax 请求时，请求的目标资源与当前网页所在的域名不一致，导致浏览器发出跨域访问请求时，由于浏览器的限制而抛出的异常。CORS 是为了更安全地控制网页对其他网站资源的访问，避免进一步的安全威胁。

CORS 通常指的是浏览器发出的基于 XMLHttpRequest 实现的跨域请求，跨域访问时如果目标资源没有正确处理预请求（OPTIONS），或者响应头中没有正确设置 Access-Control-Allow-Origin 时，就会抛出 CORS 异常。

以下是两个示例说明：

1. 前端页面发出跨域请求，并被目标资源正确处理预请求

前端代码：

$.ajax({
    type: "POST",
    url: "http://example.com/test",
    data: {name:'test'},
    success: function(data){
        console.log(data);
    }
});

后端代码（Java）：

@CrossOrigin(origins = "*", maxAge = 3600)
@RequestMapping(value = "/test", method = RequestMethod.POST)
@ResponseBody
public String test(@RequestParam String name) {
    return "Hello, " + name;
}

上述代码会在前端页面发出跨域请求时，被目标资源正确处理预请求，设置响应头 Access-Control-Allow-Origin 为 *，以允许所有域名的请求。

1. 目标资源没有正确处理预请求，并导致跨域访问异常

前端代码：

$.ajax({
    type: "POST",
    url: "http://example.com/test",
    data: {name:'test'},
    success: function(data){
        console.log(data);
    }
});

后端代码（Java）：

@RequestMapping(value = "/test", method = RequestMethod.POST)
@ResponseBody
public String test(@RequestParam String name) {
    return "Hello, " + name;
}

上述代码不会正确处理预请求，导致跨域访问时浏览器抛出异常：

Access to XMLHttpRequest at 'http://example.com/test' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

综上，为了避免 CORS 异常，我们需要在目标资源上正确处理预请求，以及在响应头中设置正确的 Access-Control-Allow-Origin。