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

时间:2021-04-22 LYAR1225 人气:0

前言

最近过年在家无聊，刚好有大把时间学习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跨域问题内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

加载全部内容