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

发表于

前言

最近过年在家无聊，刚好有大把时间学习Vue，顺便做了一个增删查改+关键字匹配+分页的小dome,可是使用Vue请求后端提供的Api的时候确发现一个大问题，前后端分离了，但是请求的时候也就必定会有跨域这种问题，那如何解决呢？

前端解决方案

思路：由于Vue现在大多数项目但是用脚手架快速搭建的，所以我们可以直接在项目中创建一个vue.config.js的配置文件，然后在里面配置proxy代理来解决，话不多说，直接上代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
javascript复制代码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方法来解决跨域问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
java复制代码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("*");
    }
}

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

本文转载自: 掘金

开发者博客 – 和开发相关的 这里全都有

0%