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 */@Configurationpublic 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 = falseaxios.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協議的配置的。 */@Configurationpublic 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 */@Componentpublic 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
