好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

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

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

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

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

创建一个WebMvcConfig类

将关于web的配置信息都用注解的形式来配置,相对比较方便

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

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类,做页面跨域的处理

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

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文件上传跨域

前端

?

1

2

3

//跨域认证

axios.defaults.withCredentials = false

axios.defaults.crossDomain = true

后端

2个类复制进去

启动类添加包扫描

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

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小时。 时间单位是秒。

     }

}

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

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 {

     }

}

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

原文链接:https://blog.csdn.net/m0_37701381/article/details/80388728

查看更多关于Spring Boot 如何解决富文本上传图片跨域问题的详细内容...

  阅读:16次