方法1:后台增加配置解决跨域

  1. @Configuration
  2. public class CorsConfig implements WebMvcConfigurer {
  3. @Override
  4. public void addCorsMappings(CorsRegistry registry) {
  5. registry.addMapping("/**") // 允许跨域的接口
  6. .allowedOrigins("*") // 允许跨域的请求源
  7. .allowedMethods("*") // 允许跨域的请求方式
  8. .allowedHeaders("*") // 允许跨域的请求头
  9. .allowCredentials(true) // 带cookie请求的时候需要开启,且allowedOrigins需要指定为具体的请求源(最好是动态配置)
  10. .maxAge(60 * 60 * 24); // 设定options请求预检命令的缓存时长
  11. }
  12. }

方法2:@CrossOrigin解决跨域

后台示例用法:

  1. @RestController
  2. @Slf4j
  3. @RequestMapping("login")
  4. @CrossOrigin
  5. public class LoginController {

其中常用的参数:
origin=”“代表所有域名都可访问;
*maxAge:
飞行前响应的缓存持续时间的最大年龄,简单来说就是Cookie的有效期 单位为秒。若maxAge是负数(默认好像是-1),则代表为临时Cookie,不会被持久化,Cookie信息保存在浏览器内存中,浏览器关闭Cookie就消失

前端示例用法:

  1. let params = new URLSearchParams();
  2. params.append('tell', $("#email").val());
  3. params.append('password',$("#password").val());
  4. axios.post("http://192.168.3.109:8080/jwt/login/logging",params).then(resp => {
  5. alert(resp.data);
  6. }).catch(error => {
  7. alert(error);
  8. })

大功告成!!