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

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

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

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

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

后端：配置允许跨域

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

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

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

检查axios配置

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

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

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