SpringBoot+Vue前后端分离实现请求api跨域问题
更新时间：2020年06月19日 08:32:01 作者：LYAR1225
这篇文章主要介绍了SpringBoot+Vue前后端分离实现请求api跨域问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
前言
最近过年在家无聊，刚好有大把时间学习Vue，顺便做了一个增删查改+关键字匹配+分页的小dome,可是使用Vue请求后端提供的Api的时候确发现一个大问题，前后端分离了，但是请求的时候也就必定会有跨域这种问题，那如何解决呢？
前端解决方案
思路：由于Vue现在大多数项目但是用脚手架快速搭建的，所以我们可以直接在项目中创建一个vue.config.js的配置文件，然后在里面配置proxy代理来解决，话不多说，直接上代码
module.exports = {
devServer: {
proxy: {
'/api':{
target: 'http://127.0.0.1:8181', //API服务器的地址
ws: true, //代理websockets
changeOrigin: true, // 是否跨域，虚拟的站点需要更管origin
pathRewrite: {
'^/api': ''
}
}
}
}
};
这样配置了之后，Vue用axios或者ajax调用后台的api的时候，只需要在请求的路径中/api/xx/xx这种格式去发送请求 这种方式有两个优点 1:解决了跨域问题，而且每次请求的时候只需要写调用的接口，前缀根本不需要再次去写 2:由于是提供了代理，利于隐藏真实的Api服务器地址，确保服务端的安全
后端解决方案
思路: 相信现在Java大多数都是Spring全家桶的天下了吧，而SpringBoot呢最近几年也是大火，基本上大多数后端人员都用过吧，所以我们可以在SpringBoot项目中创建一个config配置包，在里面创建一个webconfig配置类，通过实现WebMvcConfigurer接口的addCorsMappings方法来解决跨域问题
package com.vue.config;
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 WebConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")
.allowCredentials(true)
.maxAge(3600)
.allowedHeaders("*");
}
}
这种方式也可以解决，但是最好是前后端一致都提供跨域的解决方案
到此这篇关于SpringBoot+Vue前后端分离，请求api跨域问题的文章就介绍到这了,更多相关SpringBoot+Vue前后端分离，请求api跨域问题内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Java JConsole远程连接配置案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-08-08
这篇文章主要介绍Java 负载均衡的 5 种算法实现原理，负载均衡能够平均分配客户请求到服 务器阵列，借此提供快速获取重要数据，解决大量并发访问服务问题，这种集群技术可以用最少的投资获得接近于大型主机的性能。下面就来看看文章的具体内容吧2021-10-10
这篇文章主要介绍了JVM内存溢出和内存泄漏的区别及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
递归是一种非常重要的算法思想,无论你是前端开发,还是后端开发,都需要掌握它,下面这篇文章主要给给大家介绍了关于JavaSE递归求解汉诺塔问题的思路与方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-08-08
这篇文章主要介绍了java LinkedList类详解及实例代码的相关资料,需要的朋友可以参考下2017-01-01
这篇文章主要介绍了Java如何基于poi操作Wold工具类,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-03-03
这篇文章主要为大家详细介绍了一下Java线程中的一些常用操作，文中的示例代码讲解详细，对我们学习或工作有一定帮助，需要的可以参考一下2022-05-05
这篇文章主要介绍了Spring条件注解用法,结合具体实例形式分析了Spring条件注解相关原理、使用方法及操作注意事项,需要的朋友可以参考下2019-11-11
今天小编就为大家分享一篇关于springmvc处理响应数据的解析，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
最近很多朋友跟小编留言如何使用IDEA图形化界面连接Phoenix，在这小编就不一一回复大家了，今天抽空给大家整理一篇教程关于idea 图形化界面连接Phoenix的相关知识，需要的朋友快来学习下吧2021-05-05
最新评论