springboot高版本(2.5以上)解决跨域问题
  gmL3fcz8Uohj 2023年11月09日 12 0

版本说明

springboot 2.7.17
  • 原来代码
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 AppConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigin("*")
                .allowCredentials(true);
    }
}
  • controller层代码

@RestController
public class SendController {
    @RequestMapping("/send")
    public ArrayList<Work> send() {
        ArrayList<Work> list = new ArrayList<>();
        Work work1 = new Work(1, "骆驼祥子", "老舍", "文学", "无");
        Work work2 = new Work(2, "红楼梦", "曹雪芹", "文学", "无");
        Work work3 = new Work(3, "活着", "余华", "文学", "无");
        Work work4 = new Work(4, "西游记", "施耐庵", "文学", "无");
        list.add(work1);
        list.add(work2);
        list.add(work3);
        list.add(work4);
        return list;
    }
}
  • 前端代码(部分)
<script setup>
import { ref} from "vue";
import axios, { Axios } from "axios";
const list = ref([]);
const title = "hello world";
const send = function() {
    console.log('hello');
    axios.get('http://localhost:8080/send')
    .then((res=>{
        console.log(res.data);
        list.value = res.data;
        console.log(list.value);
    }))
    .catch((err=>{
        console.log(err);
    }))
}
</script>

<template>
  <button @click="send">点击发送axios请求</button>
  <table border="1" v-for="(item) in list" :key="item.id">
    <tr>
      <th style="color: brown;">序号</th>
      <th>文章</th>
      <th>作者</th>
      <th>类型</th>
      <th>备注</th>
    </tr>
    <tr>
      <td>{{ item.id }}</td>
      <td>{{ item.title }}</td>
      <td>{{ item.author }}</td>
      <td>{{ item.type }}</td>
      <td>{{ item.other }}</td>
    </tr>
  </table>
</template>
  • 现象

    • 前端
    • QQ截图20231108125958.png
    • 前端点击click发生跨域问题
    • QQ截图20231108130040.png
    • 后端抛出异常
    • QQ截图20231108130154.png
  • 查看异常

java.lang.IllegalArgumentException: When allowCredentials is true, allowedOrigins cannot contain the special value "*" since that cannot be set on the "Access-Control-Allow-Origin" response header. To allow credentials to a set of origins, list them explicitly or consider using "allowedOriginPatterns" instead.
  • 解析异常
When allowCredentials is true,allowedOrigins cannot contain the special value "*"
To allow credentials to a set of origins, list them explicitly or consider using "allowedOriginPatterns" instead.
  • 解决
    • 使用allowedOriginPatterns代替allowedOrigins
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 AppConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOriginPatterns("*") // 这里
                .allowCredentials(true);
    }
}

  • 重启服务,再次点击button,得到数据 QQ截图20231108130718.png
【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月09日 0

暂无评论

推荐阅读
  cO5bqZfFaDhk   2天前   6   0   0 Java
  tmQTU1JGTb1Z   3天前   8   0   0 Java
  cO5bqZfFaDhk   22小时前   3   0   0 Java
  RbYwdB2s8Ab9   22小时前   4   0   0 Java
gmL3fcz8Uohj