【在前后端分离中请求跨域问题】

目录

1. 跨域请求失败

2. 解决方案

---

1. 跨域请求失败

 当尝试通过axios从前端项目（9000端口的项目）向后端项目（9080端口的项目）发起请求时，在浏览器中会提示错误信息，例如：

已拦截跨源请求：同源策略禁止读取位于 http://localhost:9080/album/add-new 的远程资源。（原因：CORS 头缺少 'Access-Control-Allow-Origin'）。状态码：403。

或：

Access to XMLHttpRequest at 'http://localhost:9080/album/add-new' from origin 'http://localhost:9000' 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.

本次提交请求失败的原因是：默认情况下，不允许执行跨域请求，即不允许某个项目向部署在另外一个服务器上的项目发起请求！

2. 解决方案

要解决这个问题，需要在被请求的后端项目（csmall-product）中，添加Spring MVC的配置类，重写关于跨域的配置，以实现允许跨域访问！

在csmall-product项目中，在根包下创建config.WebMvcConfiguration类，实现WebMvcConfigurer接口，重写其中的addCorsMappings()方法：

 

@Configuration
public class WebMvcConfiguration implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedMethods("*")
                .allowedHeaders("*")
                .allowedOriginPatterns("*")
                .allowCredentials(true)
                .maxAge(3600);
    }

}

个人主页：居然天上楼

感谢你这么可爱帅气还这么热爱学习~~

人生海海，山山而川

你的点赞👍 收藏⭐ 留言📝 加关注✅

是对我最大的支持与鞭策