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跨域问题内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 解决前后端分离 vue+springboot 跨域 session+cookie失效问题

    环境: 前端 vue ip地址:192.168.1.205 后端 springboot2.0 ip地址:192.168.1.217 主要开发后端. 问题: 首先登陆成功时将用户存在session中,后续请求在将用户从session中取出检查.后续请求取出的用户都为null. 解决过程: 首先发现sessionID不一致,导致每一次都是新的会话,当然不可能存在用户了.然后发现cookie浏览器不能自动保存,服务器响应set-cookie了 搜索问题,发现跨域,服务器响应的setCookie浏览器无

  • 详解springboot和vue前后端分离开发跨域登陆问题

    前后端分离开发中,一般都会遇到请求跨域问题.而且一般也会遇到登陆失效问题.今天就以springboot和vue为例来看如何解决上述问题 增加过滤器 @WebFilter @Component public class CorsFilter implements Filter { @Override public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException,

  • vue+springboot前后端分离工程跨域问题解决方案解析

    假如是在同一台机器上开发,前后端分离的工程中出现跨域问题的原因是,前端工程和后端工程运行在不同的端口上.只要协议.域名.端口有一个不同就会产生跨域问题,所以在前端工程中请求后端的接口时就会因为端口不同而产生跨域问题. 一.解决跨域的原理 假设前端A要去访问服务器C,可以在A和C之间之间设置一个代理B,A访问C时先访问B,再由B代为请求C并把请求结果返回给A,这样就可以解决跨域问题.其中需要保证的是A访问B和B访问C都不能存在跨域. 二.使用vue自带的proxyTable: proxyTable

  • vue+springboot前后端分离实现单点登录跨域问题解决方法

    最近在做一个后台管理系统,前端是用时下火热的vue.js,后台是基于springboot的.因为后台系统没有登录功能,但是公司要求统一登录,登录认证统一使用.net项目组的认证系统.那就意味着做单点登录咯,至于不知道什么是单点登录的同学,建议去找一下万能的度娘. 刚接到这个需求的时候,老夫心里便不屑的认为:区区登录何足挂齿,但是,开发的过程狠狠的打了我一巴掌(火辣辣的一巴掌)...,所以这次必须得好好记录一下这次教训,以免以后再踩这样的坑. 我面临的第一个问题是跨域,浏览器控制台直接报CORS,

  • SpringBoot+Vue前后端分离实现请求api跨域问题

    前言 最近过年在家无聊,刚好有大把时间学习Vue,顺便做了一个增删查改+关键字匹配+分页的小dome,可是使用Vue请求后端提供的Api的时候确发现一个大问题,前后端分离了,但是请求的时候也就必定会有跨域这种问题,那如何解决呢? 前端解决方案 思路:由于Vue现在大多数项目但是用脚手架快速搭建的,所以我们可以直接在项目中创建一个vue.config.js的配置文件,然后在里面配置proxy代理来解决,话不多说,直接上代码 module.exports = { devServer: { proxy

  • SpringBoot+Vue前后端分离，使用SpringSecurity完美处理权限问题的解决方法

    SpringBoot+Vue前后端分离，使用SpringSecurity完美处理权限问题的解决方法

    当前后端分离时,权限问题的处理也和我们传统的处理方式有一点差异.笔者前几天刚好在负责一个项目的权限管理模块,现在权限管理模块已经做完了,我想通过5-6篇文章,来介绍一下项目中遇到的问题以及我的解决方案,希望这个系列能够给小伙伴一些帮助.本系列文章并不是手把手的教程,主要介绍了核心思路并讲解了核心代码,完整的代码小伙伴们可以在GitHub上star并clone下来研究.另外,原本计划把项目跑起来放到网上供小伙伴们查看,但是之前买服务器为了省钱,内存只有512M,两个应用跑不起来(已经有一个V部落开

  • springboot+VUE前后端分离实现疫情防疫平台JAVA

    springboot+VUE前后端分离实现疫情防疫平台JAVA

    目录 主要模块: 系统主要实现如下: 登录之后进入系统首页:目前系统主要功能如下 用户管理模块:用户添加.修改.删除.查询等基本操作 角色管理模块.通过用户绑定角色.角色控制菜单显示.灵活控制菜单. 前端VUE代码添加菜单 菜单添加修改列表层操作 历史行程数据管理:添加修改删除等操作 用户每日健康打卡列表数据展示以及添加打卡信息 员工出行外出报备管理申请 员工复工申请 管理员审核 通知公告模块: 一些设计报告和文档描述参考 数据库连接: 主要模块: 管理员用户登录:用户登录. 用户信息: 用户信

  • vue前后端分离如何解决每次请求session都会变的问题

    目录 vue前后端分离每次请求session都会变 解决方法 vue前后端分离session丢失,前端解决方式 1.解决前端每次发送的ajax都是形成新的会话 2.本地测试时结果发现还是无法成功,后端获取的sessionId为null vue前后端分离每次请求session都会变 因为前后端属于不同的域,导致每次ajax请求服务器都会当做新的用户访问,导致session丢失 解决方法  <system.webServer>     <httpProtocol>       <

  • SpringBoot+MyBatisPlus+Vue 前后端分离项目快速搭建过程(后端)

    SpringBoot+MyBatisPlus+Vue 前后端分离项目快速搭建过程(后端)

    数据库准备 data_test.sql: /* SQLyog Enterprise v12.08 (64 bit) MySQL - 5.7.31 : Database - data_test ********************************************************************* */ /*!40101 SET NAMES utf8 */; /*!40101 SET SQL_MODE=''*/; /*!40014 SET @OLD_UNIQUE_

  • SpringBoot+MyBatisPlus+Vue 前后端分离项目快速搭建过程(前端篇)

    SpringBoot+MyBatisPlus+Vue 前后端分离项目快速搭建过程(前端篇)

    后端篇 SpringBoot+MyBatisPlus+Vue 前后端分离项目快速搭建[后端篇][快速生成后端代码.封装结果集.增删改查.模糊查找][毕设基础框架] 前端篇 创建vue项目 1.找个文件夹进入命令行,输入:vue create vue-front 2.直接回车,等待片刻,稍微有点小久 3.根据提示指令测试 打开浏览器输入:http://localhost:8080/ 安装所需工具 安装的工具会有点多,为了提供更好的拓展性,可以自主选择安装(不建议),后面的代码中都是使用到了,不安装

  • ssm+vue前后端分离框架整合实现(附源码)

    前言 本文针对Spring+SpringMVC+Mybatis后台开发框架(基于maven构建)与vue前端框架(基于webpack构建)的项目整合进行介绍,对于ssm和vue单独项目的搭建不作为本文的重点,而着重介绍两者之间交互的要点. SSM 项目结构 说明 项目有service和web两个子项目组成,web依赖于service,其中web主要是control层内容,service则对应service层,而MyBatis内容放在了service项目中,spring配置文件放在了web项目中.

  • SpringBoot Security前后端分离登录验证的实现

    最近一段时间在研究OAuth2的使用,想整个单点登录,从网上找了很多demo都没有实施成功,也许是因为压根就不懂OAuth2的原理导致.有那么几天,越来越没有头绪,又不能放弃,转过头来一想,OAuth2是在Security的基础上扩展的,对于Security自己都是一无所知,干脆就先研究一下Security吧,先把Security搭建起来,找找感觉. 说干就干,在现成的SpringBoot 2.1.4.RELEASE环境下,进行Security的使用. 简单的Security的使用就不说了,目前

  • SpringBoot+Vue 前后端合并部署的配置方法

    SpringBoot+Vue 前后端合并部署的配置方法

    前后端分离开发项目 前端vue项目 服务端springboot项目 如何将vue的静态资源整合到springboot项目里,通过启动jar包的方式部署服务. 前端项目执行npm run build命令进行打包,会自动生成打包后的dist目录文件所有东西放置在Resources/static文件下,如下图 此处index.html文件的资源路径(需要在前端打包配置中进行配置)应该如下图: 对应的springboot:application.yml需添加: server: port: 8080 to

随机推荐