参考资料：https://blog.csdn.net/charleslei/article/details/51906635

文章目录

• • 1.原因分析
  • 2.解决办法（axios+SpringBoot跨域）

1.原因分析

因为vue-resource不在更新，vue推荐使用axios，所以使用axios。
在页面交互过程中，发现axios会发送两次请求，一次是自己设置的请求方式，还有一次是options。

跨域资源 共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些源站有权限访问哪些资源。另外，规范要求，对那些可能对服务器数据产生副作用的 HTTP 请求方法（特别是 GET 以外的 HTTP 请求，或者搭配某些 MIME 类型的 POST 请求），浏览器必须首先使用 OPTIONS 方法发起一个预检请求（preflight request），从而获知服务端是否允许该跨域请求。

服务器确认允许之后，才发起实际的 HTTP 请求。

在预检请求的返回中，服务器端也可以通知客户端，是否需要携带身份凭证（包括 Cookies 和 HTTP 认证相关数据）。

也就是说，它会先使用options去测试，你这个接口是否能够正常通讯，如果不能就不会发送真正的请求过来，如果测试通讯正常，则开始正常请求。

后台需要进行设置，允许options请求，不然你的请求就会受到影响，后台并作出判断，如果请求方式为options，告诉它可以通讯，其他直接什么都不做。

2.解决办法（axios+SpringBoot跨域）

设置CorsConfig.java这个跨域请求配置类

CorsConfig.java源代码：

package com.imjie.demo;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 CorsConfig {private CorsConfiguration buildConfig() {CorsConfiguration corsConfiguration = new CorsConfiguration();corsConfiguration.addAllowedOrigin("*"); // 1允许任何域名使用corsConfiguration.addAllowedHeader("*"); // 2允许任何头corsConfiguration.addAllowedMethod("*"); // 3允许任何方法（post、get等）corsConfiguration.setMaxAge(1800L);// 4.解决跨域请求两次，预检请求的有效期，单位为秒return corsConfiguration;}@Beanpublic CorsFilter corsFilter() {UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();source.registerCorsConfiguration("/**", buildConfig()); // 4return new CorsFilter(source);}
}

效果：
后端设置后，预检请求具有有效期，这样只是第一次访问此controller的时候是两次请求，后面都是一次请求。