vue项目使用axios发送post请求，返回403 status code情况

浏览器里看到的如下：

post请求，在谷歌浏览器里看到的是options

在前端也设置了请求头跨域

const service = axios.create({
    timeout: 3000, // request timeout
    responseType: 'json', // 默认的
    withCredentials: false, // 默认的
    headers: {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods':'POST,GET,OPTIONS,DELETE',
        'Access-Control-Allow-Headers':'x-requested-with,content-type',
    }
})

仍旧出现上面的问题

查找资料

根据 CORS 的标准，当浏览器发送跨域请求时，如果请求不是GET或者特定POST（Content-Type只能是 application/x-www-form-urlencoded, multipart/form-data 或 text/plain的一种）时，强烈要求浏览器必须先以 OPTIONS 请求方式发送一个预请求(preflight request)，从而获知服务器端对跨源请求所支持 HTTP 方法。

解决：

在后端设置options响应支持,添加跨域请求的配置类

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


@Configuration
public class CustomCORSConfiguration {
    private CorsConfiguration buildConfig(){
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedHeader("*"); // 允许任何的head头部
        corsConfiguration.addAllowedOrigin("*"); // 允许任何域名使用
        corsConfiguration.addAllowedMethod("*"); // 允许任何的请求方法
        corsConfiguration.setAllowCredentials(true);
        return corsConfiguration;
    }

    // 添加CorsFilter拦截器，对任意的请求使用
    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig());
        return new CorsFilter(source);
    }
}

vue项目中headers不必再写跨域部分