Spring Boot 如何解决富文本上传图片跨域问题
目录
- Spring Boot 解决富文本上传图片跨域
- 创建一个WebMvcConfig类
- 创建一个Filter类,做页面跨域的处理
- springboot文件上传跨域
- 前端
- 后端
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 { } }
以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。
赞 (0)