axios options问题

web端非同源接口请求,post application/json请求时,浏览器会发起一条options跨域预检查询。每次请求都发起一次options请求。如何解决每次api请求都会产生一条options请求呢?
发送options请求示例如下图:

一次api请求发送了一条optoins预检请求

Access-Control-Max-Age 大家可以查询一下这个报文的返回头;主要是告诉浏览器options请求有效期(单位秒),在有效期内,浏览器不会重复发送options请求。

解决该问题,就可以在服务端options请求过来询问是否能跨域请求时,返回请求头Access-Control-Max-Age的有效期设置
corsConfiguration.setMaxAge(3600L);

服务端代码示例

import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
/**
     * 跨域配置
     *
     * @return
     */
    @Bean
    @ConditionalOnProperty("plat-config.isCorsFilterEnabled")
    public CorsFilter corsFilter() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        // 1允许任何域名使用
        corsConfiguration.addAllowedOrigin("*");
        // 2允许任何头
        corsConfiguration.addAllowedHeader("*");
        // 3允许任何方法(post、get等)
        corsConfiguration.addAllowedMethod("GET");
        corsConfiguration.addAllowedMethod("POST");
        // 允许跨域查询请求响应头中添加Access-Control-Max-Age: 3600(单位秒)
        //   表明该响应的有效时间为 3600 秒。在有效时间内,浏览器无须为同一请求再次发起预检请求
        corsConfiguration.setMaxAge(3600L);

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", corsConfiguration);

        log.warn(">>>>>>>>>>>>>>> 跨域配置开启 >>>>>>>>>>");

        return new CorsFilter(source);
    }
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值