CORS跨域问题：axios请求时报错"...has been blocked by CORS policy..."

本文链接： https://blog.csdn.net/qq_23035335/article/details/97893350

现象：

在axios使用post请求时，出现如下错误

原因：

跨域被拦截了

解决：

跨域问题的解决都是在后台解决的，前台是不能解决跨域问题的。

后台是spring boot的项目，解决方法就是增加CorsFilter过滤器。spring boot 版本不同，会有不同的配置方式。

@Configuration
public class CorsConfig {

    @Bean
    //如果配置文件里配了支持跨域，才添加CorsFilter实例到FilterRegistrationBean过滤器链中
    @ConditionalOnProperty(name = "cors.enable",havingValue = "true")
    public FilterRegistrationBean corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true);
        config.addAllowedOrigin("*");
        config.addAllowedHeader("*");
        config.addAllowedMethod("*");
        source.registerCorsConfiguration("/**", config);
        FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
        bean.setOrder(0);
        return bean;
    }

}

高级写法：spring boot 1.多的版本好像不支持，记录下来，版本2.多的时候可以试下

package com.young.global.cbb.config;

import lombok.Getter;
import lombok.Setter;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.autoconfigure.condition.ConditionalOnProperty;
import org.springframework.boot.context.properties.ConfigurationProperties;
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;

import java.io.Serializable;
import java.util.List;

@Configuration
public class CorsConfig {

    private CorsProperties corsProperties;

    @Autowired
    public void setCorsProperties(CorsProperties corsProperties) {
        this.corsProperties = corsProperties;
    }

    @ConditionalOnProperty(name = "system-config.cors.enable", havingValue = "true")
    @Bean
    public FilterRegistrationBean corsFilter() {

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();

        CorsConfiguration config = new CorsConfiguration();

        config.setMaxAge(corsProperties.getMaxAge());
        config.setAllowCredentials(corsProperties.isAllowCredentials());
        config.setAllowedOrigins(corsProperties.getAllowedOrigins());
        config.setAllowedHeaders(corsProperties.getAllowedHeaders());
        config.setAllowedMethods(corsProperties.getAllowedMethods());

        source.registerCorsConfiguration(corsProperties.getRegisterPath(), config);

        FilterRegistrationBean<CorsFilter> bean = new FilterRegistrationBean<>(new CorsFilter(source));

        bean.setOrder(0);

        return bean;
    }

    @Getter
    @Setter
    @Configuration
    @ConfigurationProperties(prefix = "system-config.cors.params")
    public static class CorsProperties implements Serializable {

        private static final long serialVersionUID = 6742599084540357348L;

        private long maxAge;

        private boolean allowCredentials;

        private List<String> allowedOrigins;

        private List<String> allowedHeaders;

        private List<String> allowedMethods;

        private String registerPath;

    }

}

按照上面的方法解决跨域后，会发现浏览器请求会发送两次，第一次是没有返回值的OPTIONS类型的请求，

详情可以自行百度 "Request Method: OPTIONS"，会有更多详细的介绍。

更多关于跨域的问题可以百度：CORS。会有更多详细的介绍。

CORS跨域问题：axios请求时报错"...has been blocked by CORS policy..."

猜你喜欢