springboot 解决跨域请求，No 'Access-Control-Allow-Origin' header is present on the requested resource -清零世界

bubuko 2022/1/25 19:21:52 java 字数 24066 阅读 858 0 来源 http://www.bubuko.com/infolist-5-1.html

springboot 解决跨域请求，No ‘Access-Control-Allow-Origin‘ header is present on the requested resource

================================

?Copyright 蕃薯耀 2020-11-24

https://www.cnblogs.com/fanshuyao/

跨域请求，一般是在页面调用ajax请求向别的服务发送请求，因域名不相同，导致跨域

解决跨域请求的方式有：

一、远程服务器支持跨域请求（CORS 跨域）

二、使用nginx反向代理

三、服务器端使用Http请求

四、使用jsonp

下面以远程服务器支持跨域请求（CORS 跨域）为例：

其中有三种方式让远程服务器支持跨域请求

方式一、使用注解：@CrossOrigin

1、在类上加注解，表示类下所有方法都支持跨域请求

@CrossOrigin
@RestController
@RequestMapping("cross")
public class AaaController {

}

2、在方法加注解，表示该方法运动跨域请求

@RestController
@RequestMapping("cross")
public class AaaController {

    @CrossOrigin
    @RequestMapping("/bbb")
    public Result bbb(HttpServletRequest request, HttpServletResponse response) throws Exception {
        ……
    }
}

方式二、实现WebMvcConfigurer接口，重写addCorsMappings方法（官方文档全局配置跨域请求使用的是此方式）

import java.nio.charset.Charset;
import java.util.ArrayList;
import java.util.List;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.http.MediaType;
import org.springframework.http.converter.HttpMessageConverter;
import org.springframework.http.converter.json.MappingJackson2HttpMessageConverter;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

import com.test.util.JsonUtil;


@Configuration
public class MvcConfig implements WebMvcConfigurer {

    /**
     * 解决跨域请求
     * @return
     */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
        .allowCredentials(true)
        .allowedOrigins("*")
        .allowedHeaders("*")
        .allowedMethods("*")
        .maxAge(3600);

        WebMvcConfigurer.super.addCorsMappings(registry);
    }



    /**
     * 解决@RestController返回json结果时，IE浏览器出现下载json文件的现象。
     * @return
     */
    @Bean
    public MappingJackson2HttpMessageConverter jackson2HttpMessageConverter() {
        MappingJackson2HttpMessageConverter jsonConverter = new MappingJackson2HttpMessageConverter();
        
        List<MediaType> supportedMediaTypes  = new ArrayList<MediaType>();
        supportedMediaTypes.add(new MediaType(MediaType.TEXT_PLAIN, Charset.forName("UTF-8")));
        supportedMediaTypes.add(new MediaType(MediaType.TEXT_HTML, Charset.forName("UTF-8")));
        jsonConverter.setSupportedMediaTypes(supportedMediaTypes);
        
        jsonConverter.setObjectMapper(JsonUtil.getMapper());//设置使用jackson转换器
        
        return jsonConverter;
    }
    

    @Override
    public void configureMessageConverters(List<HttpMessageConverter<?>> converters) {
        converters.add(jackson2HttpMessageConverter());
    }

    
}

方式三、使用CorsFilter过滤器

import org.springframework.boot.web.servlet.FilterRegistrationBean;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class HttpFilterConfig {

    @Bean
    public FilterRegistrationBean<CorsFilter> corsFilter() {
        CorsConfiguration corsConfig = new CorsConfiguration();
        corsConfig.setAllowCredentials(true);
        corsConfig.addAllowedOrigin(CorsConfiguration.ALL);
        corsConfig.addAllowedMethod(CorsConfiguration.ALL);
        corsConfig.addAllowedHeader(CorsConfiguration.ALL);
        //默认可不设置这个暴露的头。这个为了安全问题，不能使用*。设置成*，后面会报错：throw new IllegalArgumentException("‘*‘ is not a valid exposed header value");
        //corsConfig.addExposedHeader("");
        corsConfig.setMaxAge(3600L);
        
        UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
        configSource.registerCorsConfiguration("/**", corsConfig);
        
        FilterRegistrationBean<CorsFilter> corsBean = new FilterRegistrationBean<CorsFilter>(new CorsFilter(configSource));
        corsBean.setName("crossOriginFilter");
        corsBean.setOrder(0);//这个顺序也有可能会有影响，尽量设置在拦截器前面
        return corsBean;
    }
    
    
}

前端页面调用示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>跨域请求</title>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
</head>
<body>

    <div>跨域请求</div>
    
<script type="text/javascript">
function ajax(){
    console.log("ajax()");
    $.ajax({  
        //async: false,//设置为同步，默认为异步（一般不需要）  
        url : "http://aaa.com:7010/gtkjCghj/workflow/processes",  //aaa.com域名修改host文件
        type : "post",  
        dataType : "json",
        //contentType: "application/json;charset=UTF-8",//contentType如果设置成application/json;charset=UTF-8，就会会变成复杂请求，导致发送2次请求，第一次是options请求，第二次才是真正的请求。
        data : {
            "processName" : "报批",
            "gxDocNo": "f2-202000234",
            "ssotoken":"eyJpc3N1Y2Nlc3MiOiJ0cnVlIiwiZmFpbHJlc29uIjoiIiwiYWNjb3VudCI6Inplbmd6aW0iLCJ0b2tlbiI6ImE5YzA5YTdjYWRlOTQwNjFiNzdmYzMxNjhkZDI2Mzc3In0=.Eg4DFhERDQ=="
        },
        complete : function(XMLHttpRequest, textStatus){  
            //alert("textStatus="+textStatus);  
        },  
        error : function(XMLHttpRequest, textStatus, errorThrown){  
            if("error" == textStatus){  
                alert("服务器未响应，请稍候再试");  
            }else{  
                alert("请求失败，textStatus="+textStatus);  
            }  
         },  
         success : function(data){  
             if(data != null){  
                 console.log("data===" + JSON.stringify(data));
             }else{  
                 alert("返回结果为空!");  
             }  
         }  
    }); 
};


ajax();
</script>

</body>
</html>

需要注意的是ajax请求中的contentType：

contentType默认的值是：application/x-www-form-urlencoded，当不设置或者为默认值时，这个是简单请求，只发送1次真正的请求。
如果contentType设置成"application/json;charset=UTF-8"会变成复杂请求，导致发送2次请求，第一次是options请求，第二次才是真正的请求。部分服务器，是禁止发送OPTIONS请求的，这样会导致跨域问题：
jquery-3.4.1.min.js:2 OPTIONS http://test.com/gtkjCghj/workflow/processes 401 (Unauthorized)
has been blocked by CORS policy: Response to preflight request doesn‘t pass access control check: No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.

================================

https://www.cnblogs.com/fanshuyao/

springboot 解决跨域请求，No 'Access-Control-Allow-Origin' header is present on the requested resource

原文：https://www.cnblogs.com/fanshuyao/p/14030944.html

如果您也喜欢它,动动您的小指点个赞吧

springboot 解决跨域请求，No 'Access-Control-Allow-Origin' header is present on the requested resource

分类汇总

您的鼓励是对我最大的支持