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跨域问题内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
SpringCloud中的断路器(Hystrix)和断路器监控(Dashboard)
本篇主要介绍的是SpringCloud中的断路器(Hystrix)和断路器指标看板(Dashboard)的相关使用知识,需要的朋友可以参考下2019-06-06
在前后端分离的开发中,经常会遇到需要从后端返回图片流给前端的情况,下面这篇文章主要给大家介绍了关于java后端调用第三方接口返回图片流给前端的具体代码实现,需要的朋友可以参考下2024-02-02
利用java+mysql递归实现拼接树形JSON列表的方法示例
这篇文章主要给大家介绍了关于利用java+mysql递归实现拼接树形JSON列表的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面跟着小编来一起看看吧。2017-08-08
解决nacos项目启动报错:Connection refused: no further&
这篇文章主要介绍了解决nacos项目启动报错:Connection refused: no further informa问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
resultMap是Mybatis最强大的元素，它可以将查询到的复杂数据（比如查询到几个表中数据）映射到一个结果集当中。这篇文章主要介绍了mybatis简单resultMap使用详解的相关资料,需要的朋友可以参考下2021-04-04
这篇文章主要为大家详细介绍了Java实现滑动验证码生成功能中的后端工具类部分，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起学习一下2022-10-10
java中LinkedList使用迭代器优化移除批量元素原理
本文主要介绍了java中LinkedList使用迭代器优化移除批量元素原理，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
线程是进程中的一个实体，是被系统独立调度和分派的基本单位，线程自己不拥有系统资源，只拥有一点在运行中必不可少的资源，但它可与同属一个进程的其它线程共享进程所拥有的全部资源。下面这篇文章主要给大家介绍了Java线程死亡的几种情况,需要的朋友可以参考下。2017-01-01
EasyExcel是阿里巴巴开源的一个excel处理框架，以使用简单、节省内存著称。它可以在尽可能节约内存的情况下支持读写百M的Excel，所以本文就将利用它实现读写Excel文件，感兴趣的可以了解一下2022-08-08
这篇文章主要为大家详细介绍了Java continue break制作简单聊天室程序，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
最新评论