方法1:后台增加配置解决跨域
@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**") // 允许跨域的接口
.allowedOrigins("*") // 允许跨域的请求源
.allowedMethods("*") // 允许跨域的请求方式
.allowedHeaders("*") // 允许跨域的请求头
.allowCredentials(true) // 带cookie请求的时候需要开启,且allowedOrigins需要指定为具体的请求源(最好是动态配置)
.maxAge(60 * 60 * 24); // 设定options请求预检命令的缓存时长
}
}
方法2:@CrossOrigin解决跨域
后台示例用法:
@RestController
@Slf4j
@RequestMapping("login")
@CrossOrigin
public class LoginController {
其中常用的参数:
origin=”“代表所有域名都可访问;
*maxAge:飞行前响应的缓存持续时间的最大年龄,简单来说就是Cookie的有效期 单位为秒。若maxAge是负数(默认好像是-1),则代表为临时Cookie,不会被持久化,Cookie信息保存在浏览器内存中,浏览器关闭Cookie就消失
前端示例用法:
let params = new URLSearchParams();
params.append('tell', $("#email").val());
params.append('password',$("#password").val());
axios.post("http://192.168.3.109:8080/jwt/login/logging",params).then(resp => {
alert(resp.data);
}).catch(error => {
alert(error);
})
大功告成!!