Spring Boot解决富文本上传图片跨域问题

小灰灰 2022-05-24 04:52 207阅读 0赞

> 在前后端分离的情况下，后台所写的接口在前端调用的时候，可能前端浏览器已经读取到了数据，但是在前端代码`ajax`请求的时候，请求回调里会出现页面跨域的控制台打印错误，这个时候只需要后台配置一下头部请求就可以解决

**我用的是SpringBoot，讲解一下如何配置SpringBoot来解决页面跨域问题**

**创建一个`WebMvcConfig`类，将关于web的配置信息都用注解的形式来配置，相对比较方便**

import com.alibaba.fastjson.serializer.SerializerFeature;
    import com.alibaba.fastjson.support.config.FastJsonConfig;
    import com.alibaba.fastjson.support.spring.FastJsonHttpMessageConverter;
    import com.uhope.web.codegenerator.filter.ServiceFilter;
    import org.slf4j.Logger;
    import org.slf4j.LoggerFactory;
    import org.springframework.boot.autoconfigure.http.HttpMessageConverters;
    import org.springframework.boot.web.servlet.FilterRegistrationBean;
    import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.http.converter.HttpMessageConverter;
    import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
    import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
    
    import java.nio.charset.Charset;
    
    /** * Spring MVC 配置 * @author Chenbin */
    @Configuration
    public class WebMvcConfig extends WebMvcConfigurerAdapter { 
    
        private final Logger logger = LoggerFactory.getLogger(WebMvcConfig.class);
    
    
    
        /** * 解决路径资源映射问题 * * @param registry */
        @Override
        public void addResourceHandlers(ResourceHandlerRegistry registry) { 
            registry.addResourceHandler("swagger-ui.html").addResourceLocations("classpath:/META-INF/resources/");
            registry.addResourceHandler("/webjars/**").addResourceLocations("classpath:/META-INF/resources/webjars/");
            registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
        }
    
    
        /** * 使用fastJson代替Jackjson解析JSON数据 * * @return */
        @Bean
        public HttpMessageConverters fastJsonHttpMessageConverters() { 
            FastJsonHttpMessageConverter fastConverter = new FastJsonHttpMessageConverter();
            FastJsonConfig fastJsonConfig = new FastJsonConfig();
            /* * 转换为JSON字符串，默认: * WriteNullListAsEmpty List字段如果为null,输出为[],而非null * WriteNullStringAsEmpty 字符类型字段如果为null,输出为”“,而非null * WriteMapNullValue 是否输出值为null的字段,默认为false */
            fastJsonConfig.setSerializerFeatures(SerializerFeature.WriteNullListAsEmpty, SerializerFeature.WriteNullStringAsEmpty, SerializerFeature.WriteMapNullValue, SerializerFeature.WriteDateUseDateFormat);
            fastConverter.setFastJsonConfig(fastJsonConfig);
            fastConverter.setDefaultCharset(Charset.forName("UTF-8"));
            HttpMessageConverter<?> converter = fastConverter;
            return new HttpMessageConverters(converter);
        }
    
        /** * 这个Filter 解决页面跨域访问问题 */
        @Bean
        public FilterRegistrationBean omsFilter() { 
            FilterRegistrationBean registration = new FilterRegistrationBean();
            registration.setFilter(new ServiceFilter());
            registration.addUrlPatterns("/*");
            registration.setName("MainFilter");
            registration.setAsyncSupported(true);
            registration.setOrder(1);
            return registration;
        }
    }

**其中JSON数据返回需要引入阿里巴巴FastJson这个依赖，可以自行去pom.xml文件中引入**

**这样还不够，还需要创建一个Filter类，做页面跨域的处理**

import org.slf4j.Logger;
    import org.slf4j.LoggerFactory;
    import javax.servlet.*;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    
    /** * @author Chenbin */
    public class ServiceFilter implements Filter { 
    
        private static final Logger LOGGER = LoggerFactory.getLogger(ServiceFilter.class);
    
        @Override
        public void doFilter(ServletRequest request, ServletResponse response, FilterChain filterChain)
                throws IOException, ServletException { 
            HttpServletResponse resp = (HttpServletResponse) response;
            HttpServletRequest req = (HttpServletRequest) request;
    
            // 解决页面跨域访问问题
            resp.setHeader("Access-Control-Allow-Origin", "*");
            resp.setHeader("Access-Control-Allow-Credentials", "true");
            resp.setHeader("Access-Control-Allow-Methods", "*");
            resp.setHeader("Access-Control-Allow-Headers", "Content-Type,Access-Token");
            resp.setHeader("Access-Control-Expose-Headers", "*");
            filterChain.doFilter(req, resp);
    
    
        }
    
    
        @Override
        public void init(FilterConfig filterConfig) throws ServletException { 
        }
    
        @Override
        public void destroy() { 
        }
    }

**这两个类配置好了以后，重启服务，再与前端交互就不会出现这样的跨域问题了，因为在Filter这个类里加了一个请求头`Access-Control-Allow-Origin`**