Spring Boot 如何解決富文本上傳圖片跨域問題

更新時(shí)間：2021年09月15日 10:11:54 作者：如漩渦

這篇文章主要介紹了Spring Boot 如何解決富文本上傳圖片跨域問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

Spring Boot 解決富文本上傳圖片跨域

在前后端分離的情況下，后臺(tái)所寫的接口在前端調(diào)用的時(shí)候，可能前端瀏覽器已經(jīng)讀取到了數(shù)據(jù)，但是在前端代碼ajax請(qǐng)求的時(shí)候，請(qǐng)求回調(diào)里會(huì)出現(xiàn)頁面跨域的控制臺(tái)打印錯(cuò)誤，這個(gè)時(shí)候只需要后臺(tái)配置一下頭部請(qǐng)求就可以解決

我用的是SpringBoot，講解一下如何配置SpringBoot來解決頁面跨域問題

創(chuàng)建一個(gè)WebMvcConfig類

將關(guān)于web的配置信息都用注解的形式來配置，相對(duì)比較方便

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數(shù)據(jù)
     *
     * @return
     */
    @Bean
    public HttpMessageConverters fastJsonHttpMessageConverters() {
        FastJsonHttpMessageConverter fastConverter = new FastJsonHttpMessageConverter();
        FastJsonConfig fastJsonConfig = new FastJsonConfig();
        /*
         * 轉(zhuǎn)換為JSON字符串，默認(rèn):
         * WriteNullListAsEmpty    List字段如果為null,輸出為[],而非null
         * WriteNullStringAsEmpty  字符類型字段如果為null,輸出為”“,而非null
         * WriteMapNullValue       是否輸出值為null的字段,默認(rèn)為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);
    }
    /**
     * 這個(gè)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數(shù)據(jù)返回需要引入阿里巴巴FastJson這個(gè)依賴，可以自行去pom.xml文件中引入

這樣還不夠，還需要

創(chuàng)建一個(gè)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() {
    }
}

這兩個(gè)類配置好了以后，重啟服務(wù)，再與前端交互就不會(huì)出現(xiàn)這樣的跨域問題了，因?yàn)樵贔ilter這個(gè)類里加了一個(gè)請(qǐng)求頭Access-Control-Allow-Origin

springboot文件上傳跨域

前端

//跨域認(rèn)證
axios.defaults.withCredentials = false
axios.defaults.crossDomain = true

后端

2個(gè)類復(fù)制進(jìn)去

啟動(dòng)類添加包掃描

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協(xié)議的配置類。
 * 繼承WebMvcConfigurerAdapter，并且重寫方法addCorsMappings。
 * addCorsMappings方法是用于增加Cros協(xié)議配置的方法。默認(rèn)的實(shí)現(xiàn)是空實(shí)現(xiàn)。也就是說，在默認(rèn)的配置環(huán)境中，是不進(jìn)行Cros協(xié)議的配置的。
 */
@Configuration
public class CrosConfiguration extends WebMvcConfigurerAdapter {  
    @Autowired
    ProcessInterceptor processInterceptor; 
    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        // 添加攔截器(攔截器中只有preHandle返回true時(shí)才繼續(xù)執(zhí)行下一個(gè)攔截器或者controller，否則直接返回)
        // registry.addInterceptor(logInterceptor).addPathPatterns("/**");
        registry.addInterceptor(processInterceptor).addPathPatterns("/**");
        //registry.addInterceptor(csrCheckInterceptor).addPathPatterns("/**");
        //registry.addInterceptor(menuAuthInterceptor).addPathPatterns("/**");
        super.addInterceptors(registry);
    }
    /**
     * 就是注冊(cè)的過程，注冊(cè)Cors協(xié)議的內(nèi)容。
     * 如： Cors協(xié)議支持哪些請(qǐng)求URL，支持哪些請(qǐng)求類型，請(qǐng)求時(shí)處理的超時(shí)時(shí)長(zhǎng)是什么等。
     * @param registry - 就是用于注冊(cè)Cros協(xié)議內(nèi)容的一個(gè)注冊(cè)器。
     */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry
                .addMapping("/**")// 所有的當(dāng)前站點(diǎn)的請(qǐng)求地址，都支持跨域訪問。
                .allowedMethods("GET", "POST", "PUT", "DELETE","OPTIONS") // 當(dāng)前站點(diǎn)支持的跨域請(qǐng)求類型是什么。
                .allowCredentials(true) // 是否支持跨域用戶憑證
                .allowedHeaders("*")
                .allowedOrigins("*") // 所有的外部域都可跨域訪問。 如果是localhost則很難配置，因?yàn)樵诳缬蛘?qǐng)求的時(shí)候，外部域的解析可能是localhost、127.0.0.1、主機(jī)名
                .maxAge(3600); // 超時(shí)時(shí)長(zhǎng)設(shè)置為1小時(shí)。 時(shí)間單位是秒。
    }
}

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）,設(shè)置為true,必須設(shè)置域名,不能使用通配符
//        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 { 
    }
}

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: