控制台报缺少“Access-Control-Allow-Origin”

阳光穿透心脏的1/2处 2023-06-29 07:26 7阅读 0赞

## 控制台报缺少 “Access-Control-Allow-Origin” ##

其实解决跨域问题 不止只是前端能解决 ，后端也可以解决下面我使用基于Spring Boot 的跨域解决方案：

**跨域是指可能是指协议、域名以及端口不相同** 导致无法访问

出现以下情况：

![在这里插入图片描述][20200111132750324.png]

解决方法有：

方法一：

@Configuration
    public class WebMvcConfig implements WebMvcConfigurer { 
    
        @Override
        public void addCorsMappings(CorsRegistry registry) { 
            registry.addMapping("/**")//所有应用都会去处理跨域请求
                    .allowedHeaders("*")//允许所有请求头
                    .allowedMethods("*")//请求通过的请求数
                    .allowedOrigins("*")//请求地址
                    .allowCredentials(true);//允许证书
        }
    
    }

就可以解决跨域问题了页面也可以访问：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlbmc3NA_size_16_color_FFFFFF_t_70]

方式二:

实现Filter,在doFilter中编写请求头信息

@Component
    public class CorsConfig implements Filter { 
    
    
        @Override
        public void init(FilterConfig filterConfig) throws ServletException { 
    
        }
    
        @Override
        public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException { 
            HttpServletResponse response = (HttpServletResponse) res;
    
            HttpServletRequest reqs = (HttpServletRequest) req;
    
            // response.setHeader("Access-Control-Allow-Origin",reqs.getHeader("Origin"));
            response.setHeader("Access-Control-Allow-Origin","*");
            response.setHeader("Access-Control-Allow-Credentials", "true");
            response.setHeader("Access-Control-Allow-Methods", "POST, GET, PATCH, DELETE, PUT");
            response.setHeader("Access-Control-Max-Age", "3600");
            response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
            chain.doFilter(req, res);
        }
    
        @Override
        public void destroy() { 
    
        }
    }

[20200111132750324.png]: https://img-blog.csdnimg.cn/20200111132750324.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlbmc3NA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200111132812764.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlbmc3NA==,size_16,color_FFFFFF,t_70