springboot+vue前后端分离项目跨域问题
错误描述
前端没有配置代理直接向后端服务器发送 post 请求,控制台报了以下错误
配置后端允许跨域
方式一
新建一个配置类,代码如下
package com.itheima.config;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class CORSConfig implements WebMvcConfigurer {
public void addCorsMappings(CorsRegistry registry) {
// 设置允许跨域的路径
registry.addMapping("/**")
// 设置允许跨域请求的域名
.allowedOriginPatterns("*")
// 是否允许cookie
.allowCredentials(true)
// 设置允许的请求方式
.allowedMethods("GET", "POST", "DELETE", "PUT")
// 设置允许的header属性
.allowedHeaders("*")
// 跨域允许时间
.maxAge(3600);
}
}
方式二
在 Spring Boot 启动类上添加重写方法
@Override
public void addCorsMappings(CorsRegistry registry) {
// 设置允许跨域的路径
registry.addMapping("/**")
// 设置允许跨域请求的域名
.allowedOriginPatterns("*")
// 是否允许cookie
.allowCredentials(true)
// 设置允许的请求方式
.allowedMethods("GET", "POST", "DELETE", "PUT")
// 设置允许的header属性
.allowedHeaders("*")
// 跨域允许时间
.maxAge(3600);
}
方式三
在需要设置允许跨域请求的表现层接口方法上添加注解
@CrossOrigin(origins = {"http://localhost:7070"}) // 允许跨域
注意:http://localhost:7070 替换为前端项目的地址
注解 @CrossOrigin 也可以放在表现层的类上,表示该类所有请求都允许跨域