Vue+SSM跨域问题解决

刚学完ssm框架,想着自己搭建环境与vue前端进行数据交互,遇到了跨域问题,然后百度了很多方法,试过导坐标,配置过滤器,配置拦截器,配置xml文件,目前适合我的就是配置spring-mvc.xml文件,只用配置这个文件就能解决跨域问题啦。有什么不对的地方大佬可以指出来,我小白一枚。

错误

解决方法

在spring-mvc.xml中配置

<mvc:cors>
    <mvc:mapping path="/**"
                 allowed-origins="*"
                 allowed-methods="POST, GET, OPTIONS, DELETE, PUT"
                 allowed-headers="Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With"
                 allow-credentials="true" />
</mvc:cors>

用axios传数据

用qs来封装数据,后台能直接接收到

数据保存成功

 

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
### 回答1: 解决跨域的方法有很多,但是两个最常见的方法是使用JSONP或者CORS。JSONP是一种使用动态<script>标签来实现跨域请求的技术,而CORS(跨域资源共享)是一种基于HTTP头部的跨域技术,它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。 ### 回答2: Vue和Spring Boot是两个独立的框架,分别用于前端和后端开发。Vue用于构建用户界面,而Spring Boot用于构建后端服务。由于浏览器的同源策略,Vue向Spring Boot发送HTTP请求时可能会遇到跨域问题Vue解决跨域问题可以通过在配置文件中配置代理服务器。在Vue项目的配置文件(如vue.config.js)中,可以使用devServer属性配置代理服务器。通过设置proxy选项,可以将Vue的HTTP请求代理到Spring Boot项目的对应URL上,从而避免跨域问题。例如: ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:8080', // Spring Boot项目地址 changeOrigin: true } } } } ``` 上述配置的意思是将所有以`/api`开头的HTTP请求代理到`http://localhost:8080`上,即Spring Boot项目的地址。这样,Vue的请求将会发送到代理服务器上,再由代理服务器转发到Spring Boot项目上,避免了跨域问题。 而在Spring Boot中解决跨域问题可以通过添加CORS(跨源资源共享)配置。可以在后端的控制器类或方法上使用`@CrossOrigin`注解来设置允许跨域请求的来源。例如: ```java @RestController public class MyController { @CrossOrigin(origins = "http://localhost:8081") @GetMapping("/api/data") public String getData() { // 处理业务逻辑 return "Data"; } } ``` 上述代码中,`@CrossOrigin`注解的`origins`属性指定了允许跨域请求的来源,这里设置为`http://localhost:8081`。这样,对`/api/data`路径的请求将允许来自该来源的跨域请求。 综上所述,Vue和Spring Boot解决跨域问题的方法分别是通过配置代理服务器和使用CORS注解。这样可以实现前后端之间的正常通信,避免跨域问题带来的限制。 ### 回答3: Vue和Spring Boot是两个常用的Web开发框架,当它们同时使用时,往往会遇到跨域问题。跨域是由于浏览器的同源策略限制导致的,在前后端分离的开发架构中,前端和后端往往不在同一个域名下,因此会涉及到跨域请求。 为了解决Vue和Spring Boot跨域问题,首先需要在Vue的项目中设置代理来转发后端请求。在Vue的配置文件中,通过设置`proxy`参数,将需要转发的后端请求代理到指定的地址。例如,假设Vue的开发服务器运行在`localhost:8080`上,而Spring Boot的后端服务运行在`localhost:8081`上,可以通过以下配置来实现代理转发: ```js // vue.config.js module.exports = { // ... devServer: { proxy: { '/api': { target: 'http://localhost:8081', changeOrigin: true } } } } ``` 上述配置表示将所有以`/api`开头的请求转发到`http://localhost:8081`地址上,`changeOrigin: true`参数表示保持源地址的协议(http/https)。 另外,还需要在Spring Boot后端项目中进行相应的配置以允许跨域请求。可以使用`@CrossOrigin`注解来标记Controller或方法,开启跨域请求的支持。例如: ```java @RestController @CrossOrigin(origins = "http://localhost:8080") public class ExampleController { // ... } ``` 上述配置表示允许来自`http://localhost:8080`地址的跨域请求。 通过以上配置,就可以解决Vue和Spring Boot跨域问题前端Vue项目发送的请求会先经过代理转发到后端Spring Boot服务,后端接收到请求后会根据`@CrossOrigin`注解进行跨域请求的处理,从而实现跨域请求的正常通信。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值