vue前后端分离解决跨域问题

vue解决前后端分离解决跨域问题

报错信息如下：

翻译：

解决方案

1、在vue项目中

withCredentials: true, // Check cross-site Access-Control

2、在Java后端项目中

方法1：在Java项目中的controller层加入@CrossOrigin //跨域(CORS)支持

方法2：编写解决跨域问题的配置类

配置类代码如下：

/**
 * 解决跨域问题
 * @author 江江江
 * @create 2021/9/22 9:28
 */
@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOriginPatterns("*")
                .allowedMethods("GET","HEAD","POST","PUT","DELETE","OPTIONS")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*");
    }
}

注意：vue中的withCredential设置为false，但Java后端有解决跨域问题的配置类，依然可以解决跨域问题，建议前后端都要加上噢。