当客户端向服务器端提交跨域(提交请求的、被请求的,不在同一台服务器,或不是同一个服务器同一端口)**的异步请求时,默认情况下,服务器端都是不支持的,所以,在客户端的浏览器的控制台会提示以下错误,例如使用Chrome时:
Access to XMLHttpRequest at 'http://localhost:9080/albums/add-new' from origin 'http://localhost:9000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
使用FireFox时:
已拦截跨源请求:同源策略禁止读取位于 http://localhost:9080/albums/add-new 的远程资源。(原因:CORS 头缺少 'Access-Control-Allow-Origin')。状态码:200。
要解决这个问题,服务器端必须允许跨域访问!
在基于Spring MVC的项目中,需要自定义配置类,实现WebMvcConfigurer
接口,重写其中的addCorsMappings()
方法,在其中配置允许跨域的访问。
在csmall-product
项目中,在项目的根包下,创建config.WebMvcConfiguration
配置类,通过此类配置允许跨域访问: