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

 更新时间:2021年09月15日 10:11:54   作者:如漩涡  
这篇文章主要介绍了Spring Boot 如何解决富文本上传图片跨域问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

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

在前后端分离的情况下,后台所写的接口在前端调用的时候,可能前端浏览器已经读取到了数据,但是在前端代码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

springboot文件上传跨域

前端

//跨域认证
axios.defaults.withCredentials = false
axios.defaults.crossDomain = true

后端

2个类复制进去

启动类添加包扫描

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
 
/**
 * Cros协议的配置类。
 * 继承WebMvcConfigurerAdapter,并且重写方法addCorsMappings。
 * addCorsMappings方法是用于增加Cros协议配置的方法。默认的实现是空实现。也就是说,在默认的配置环境中,是不进行Cros协议的配置的。
 */
@Configuration
public class CrosConfiguration extends WebMvcConfigurerAdapter {  
    @Autowired
    ProcessInterceptor processInterceptor; 
    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        // 添加拦截器(拦截器中只有preHandle返回true时才继续执行下一个拦截器或者controller,否则直接返回)
        // registry.addInterceptor(logInterceptor).addPathPatterns("/**");
        registry.addInterceptor(processInterceptor).addPathPatterns("/**");
        //registry.addInterceptor(csrCheckInterceptor).addPathPatterns("/**");
        //registry.addInterceptor(menuAuthInterceptor).addPathPatterns("/**");
        super.addInterceptors(registry);
    }
    /**
     * 就是注册的过程,注册Cors协议的内容。
     * 如: Cors协议支持哪些请求URL,支持哪些请求类型,请求时处理的超时时长是什么等。
     * @param registry - 就是用于注册Cros协议内容的一个注册器。
     */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry
                .addMapping("/**")// 所有的当前站点的请求地址,都支持跨域访问。
                .allowedMethods("GET", "POST", "PUT", "DELETE","OPTIONS") // 当前站点支持的跨域请求类型是什么。
                .allowCredentials(true) // 是否支持跨域用户凭证
                .allowedHeaders("*")
                .allowedOrigins("*") // 所有的外部域都可跨域访问。 如果是localhost则很难配置,因为在跨域请求的时候,外部域的解析可能是localhost、127.0.0.1、主机名
                .maxAge(3600); // 超时时长设置为1小时。 时间单位是秒。
    }
}
import org.springframework.stereotype.Component;
import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView; 
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; 
/**
 * @author:Administrator
 * @date:2019/10/9
 */
@Component
public class ProcessInterceptor implements HandlerInterceptor { 
    @Override
    public boolean preHandle(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Object o) throws Exception { 
        httpServletResponse.setHeader("Access-Control-Allow-Headers", "X-Requested-With, Accept, Content-Type,Authorization");
        httpServletResponse.setHeader("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
        String origin = httpServletRequest.getHeader("Origin");
        httpServletResponse.setHeader("Access-Control-Allow-Origin", "*");
        // 是否允许浏览器携带用户身份信息(cookie),设置为true,必须设置域名,不能使用通配符
//        httpServletResponse.setHeader("Access-Control-Allow-Credentials", "true");
//        httpServletResponse.setHeader("Access-Control-Allow-Origin", "*"); 
//        httpServletResponse.setHeader("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With"); 
//        httpServletResponse.setHeader("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS"); 
        String method = httpServletRequest.getMethod(); 
        if (method.equals("OPTIONS")) {
            httpServletResponse.setStatus(200);
            return false;
        }
        return true;
    }
 
    @Override
    public void postHandle(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Object o, ModelAndView modelAndView) throws Exception { 
    }
 
    @Override
    public void afterCompletion(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Object o, Exception e) throws Exception { 
    }
}

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Dwr3.0纯注解(纯Java Code配置)配置与应用浅析二之前端调用后端

    Dwr3.0纯注解(纯Java Code配置)配置与应用浅析二之前端调用后端

    我们讲到了后端纯Java Code的Dwr3配置,完全去掉了dwr.xml配置文件,但是对于使用注解的类却没有使用包扫描,而是在Servlet初始化参数的classes里面加入了我们的Service组件的声明暴露,对于这个问题需要后面我们再细细研究下这篇文章,主要分析介绍前端怎么直接调用后端
    2016-04-04
  • Java实现用位运算维护状态码

    Java实现用位运算维护状态码

    位运算是一种非常高效的运算方式,在算法考察中比较常见,那么业务代码中我们如何使用位运算呢,感兴趣的小伙伴快跟随小编一起学习一下吧
    2024-03-03
  • Java LockSupport常用方法的源码分析

    Java LockSupport常用方法的源码分析

    这篇文章主要为大家详细介绍了Java LockSupport类中的方法和部分源码,以及面试常问到的一个小问题,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-02-02
  • MybatisPlus查询数据日期格式化问题解决方法

    MybatisPlus查询数据日期格式化问题解决方法

    MyBatisPlus是MyBatis的增强工具,支持常规的CRUD操作以及复杂的联表查询等功能,这篇文章主要给大家介绍了关于MybatisPlus查询数据日期格式化问题的解决方法,需要的朋友可以参考下
    2023-10-10
  • 聊聊Java三种常见的分布式锁

    聊聊Java三种常见的分布式锁

    目前分布式锁的实现方案主要包括三种,本文就来介绍一下这三种常见的分布式锁以及这三种锁的性能等,具有一定的参考价值,感兴趣的可以了解一下
    2023-06-06
  • 读取xml文件中的配置参数实例

    读取xml文件中的配置参数实例

    下面小编就为大家带来一篇读取xml文件中的配置参数实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • Java for循环Map集合优化实现解析

    Java for循环Map集合优化实现解析

    这篇文章主要介绍了Java for循环Map集合优化实现解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-01-01
  • 使用Mybatis-plus实现时间自动填充(代码直接可用)

    使用Mybatis-plus实现时间自动填充(代码直接可用)

    这篇文章主要介绍了使用Mybatis-plus实现时间自动填充(代码直接可用),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • java开发时各类工具的使用规范

    java开发时各类工具的使用规范

    这篇文章主要介绍了java编码时各类工具的使用规范,多人协作、共同开发一个项目,如果没有统一的代码规范的话,项目中的每个人都按照自己的习惯率性而为,就会导致整个项目的代码看上去杂乱无章,可读性非常差,并且持续增加后续的维护成本。对此感兴趣可以来了解一下
    2020-07-07
  • Java字符串逆序方法详情

    Java字符串逆序方法详情

    这篇文章主要介绍了Java字符逆序,字符逆序主要原理就是将一个字符串str的内容颠倒过来,并输出,下文操作分享需要的小伙伴可以参考一下
    2022-03-03

最新评论