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

Crime_man2025-03-04 19:34

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

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

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

ts 复制代码

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

后端：配置允许跨域

java 复制代码

@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后，成功解决该问题。

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