CORS跨域問題：axios請求時報錯"...has been blocked by CORS policy..."

現象：

在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。會有更多詳細的介紹。