进行前后端代码联调的时候,使用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后,成功解决该问题。
出现跨域请求时,可以不用急着处理跨域,先检查请求的路径及域名,以上没问题后,在进行跨域的处理。