一次有趣的前后端跨越排查

进行前后端代码联调的时候，使用axios调用后端请求，因为都是本地进行联调，所以没有考虑跨域的问题，写了一个get的请求接口，请求后端时，突然跳出下面的问题：

错误的信息一看很像就是跨域的问题，所以直接先进行跨域处理：

前端：在vue.config.js配置对应的路由

devServer: {proxy: {"/api": {target: "http:localhost:8101",changeOrigin: true,},},},

后端：配置允许跨域

@Configuration
public class CorsConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {// 覆盖所有请求registry.addMapping("/**")// 允许发送 Cookie.allowCredentials(true)// 放行哪些域名（必须用 patterns，否则 * 会和 allowCredentials 冲突）.allowedOriginPatterns("*").allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS").allowedHeaders("*").exposedHeaders("*");}
}

配置完成后，发现问题还是没有解决…

后来尝试其他解决跨域的方式，问题还是没有解决。

检查axios配置

发现axios配置的路由是https协议的。。。。

更改协议成http后，成功解决该问题。

出现跨域请求时，可以不用急着处理跨域，先检查请求的路径及域名，以上没问题后，在进行跨域的处理。