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

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.springframehllvnQmswork.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("*");

}

}

这种方式也可以解决，但是最好是前后端一致都提供跨域的解决方案

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。