vue+springboot，vue跨域调取springboot控制器接口

最新推荐文章于 2025-04-17 19:31:06 发布

干饭要有精神

最新推荐文章于 2025-04-17 19:31:06 发布

阅读量983

点赞数 1

分类专栏：前端vue

本文链接：https://blog.youkuaiyun.com/weixin_46828364/article/details/109693001

版权

前端vue 专栏收录该内容

5 篇文章

订阅专栏

本文记录了在Vue项目中使用axios处理前后端交互时遇到的跨域问题。通过设置代理服务器，避开了浏览器的同源策略限制。详细介绍了如何配置axios代理，包括在`config/index.js`中的proxyTable设置，以及SpringBoot后台使用`@CrossOrigin`注解允许跨域。同时提到了GET和POST请求的实现，并提醒注意接口路径因pathRewrite可能引起的调用变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景

写项目的时候，使用 vue 的 created 加载数据的时候，遇到了前后端交互的问题，查了很多资料，简单记录下。
做数据交互的时候是使用 axios 的代理服务器来解决的。
代理服务器可以避免浏览器的同源策略保护，达到前后端交互的目的。

可能发生跨域的情况

一般URL地址： [ 协议 ] : // [ IP地址 ] : [ 端口号 ] / … / …
协议不同，如：http 或者 https。
IP地址不同，如：192.168.127.1 或者 192.168.127.2。
端口号不同，如：8000 或者 8080。
只要三个，有一个满足，可发生跨域。

解决办法

安装 axios

npm install axios -S

在 config -> index.js 文件里，找到一个 proxyTable 的配置。
对于 pathRewrite 属性，有些复杂（可能是作用于代理服务器上，重定向或者赋值，往下看是例子）。
图展示

测试

发送一个 get 请求，要调用的接口是 /test。
若要发送 post 请求，需要安装 qs。
在这里插入图片描述
在springboot的控制器中，定义接口，并且使用 @CrossOrigin来表示是可跨域接口。
@CrossOrigin这个注解可以解决 No ‘Access-Control-Allow-Origin’ header is present on the requeste浏览器报错问题。

返回的结果要区别下，由于在配置代理服务器时，pathRewrite写了 ‘^/test’: ‘mySecond/’，最后反而调用了第二个接口，而不是第一个接口
在这里插入图片描述