【报错解决】No ‘Access-Control-Allow-Origin‘ header is present on the requested resource

我立志做一名把细节都说清楚的博主，欢迎关注🎉 ~
原创不易，有帮助还请鼓励个【赞】哦，谢谢无敌可爱帅气又迷人的小哥哥、小姐姐，爱你哦 ❥(^_-)~

项目背景

• 前端：VUE+Element。
• 后端：经典SSM。
• 前后端联调，前端发送请求后，在console显示该报错信息。

报错还原

Access to XMLHttpRequest at 
'http://localhost:8080/XXX/XXX/XXX?pageIndex=0&pageSize=5' 
from origin 
'http://localhost:8081' 
has been blocked by CORS policy: No 
'Access-Control-Allow-Origin' 
header is present on the requested resource.

报错原因

• 后端没有加上跨域注释。

报错解决

• 在Cotroller层加上处理跨域请求的注解：@CrossOrigin 即可解决该问题。

@Controller
@CrossOrigin  // 加上该注解即可解决跨域问题。
@RequestMapping("/XXX")
public class XXXController { // Controller层加上@CrossOrigin
	@ResponseBody
    @GetMapping("/XXX")
    private Map<String, Object> XXX() {
    	XXX...
    }

	@ResponseBody
    @PostMapping("/XXX")
    private Map<String, Object> XXX() {
    	XXX...
    }
} 

我立志做一名把细节都说清楚的博主，欢迎关注🎉 ~
原创不易，有帮助还请鼓励个【赞】哦，谢谢无敌可爱帅气又迷人的小哥哥、小姐姐，爱你哦 ❥(^_-)~