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跨域问题内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了使用Gradle做Java代码质量检查的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
Java Optional解决空指针异常总结(java 8 功能)
这篇文章主要介绍了Java Optional解决空指针异常总结(java 8 功能)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-11-11
这篇文章主要介绍了SpringBoot与SpringCache的概念及基本用法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-02-02
在复杂的业务场景中,嵌套事务可以帮助我们更加精细地控制数据的一致性,然而,在 Spring Boot 中,如果嵌套事务的配置不当,可能会导致事务不生效的问题,尤其是在同一个类中进行方法调用时,本文将详细介绍嵌套事务的原理、失效的原因以及解决方案2025-01-01
Idea 2020.2安装MyBatis Log Plugin 不可用的解决方法
小编在使用时发现Idea 2020.2 MyBatis Log Plugin 收费了，这个可以替代用，小编特此把解决方案分享到脚本之家平台供大家参考，感兴趣的朋友一起看看吧2020-11-11
在微服务项目中,会遇到@Autowired注解失效的情况,下面这篇文章主要给大家介绍了关于@Autowired注解以及失效的几个原因的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-03-03
这篇文章主要介绍了Java集合排序，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
这篇文章主要给大家介绍了关于Spring MVC数据转换的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起看看吧。2017-09-09
之前我们使用spring,最多的还是通过xml配置文件的方式来配置spring bean等内容,随着注解的广泛应用和spring4中Java config的引入,xml配置文件方式逐步被替换,但是如果是想要使用xml配置文件方式的话,也可以通过@ImportResource注解来实现,下面我们来一起看下如何使用.2021-05-05
这篇文章主要给大家介绍了关于Spring Boot基础入门之基于注解的Mybatis的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-07-07
最新评论