前后端分离无法携带 cookie 坑点（Vue+SpringBoot 跨域问题）

技术框架：

• 前端：Vue-cli 2.X
• 后端：SpringBoot+MyBatis

本人由于接了甲方的项目，最近赶项目的时候，遇到了一个坑点。

由于我们分工合作，前端由我的小伙伴去写，我将写好了一部分接口的项目打包放到了腾讯云服务器上，方便前端去测试，但是出现了一个坑点。

前后端交互的时候，出现登录后的操作，被后端拦截器拦截了！！！

做前端的小伙伴，和我说这个问题的时候，我果断的告诉他你前端发送请求的时候，需要设置它携带 Cookie

刚刚好我的小伙伴，用的 axios 来发送请求。

于是一顿操作猛如虎，在 Vue 项目下的 main.js 文件下加上

axios.defaults.withCredentials = true

很快前端的小伙伴传来了消息，说我搞事情，不行的！！！

于是头铁的我，拿了前端的项目来自己测试，又是一顿猛如虎的操作，测试后，发现了问题的所在。

当我将前端请求的域名地址，改到了我自己本地上的时候，发现它神奇的携带了，惊呆了！

于是我很快的想到了，是跨域问题。

又开始了一顿操作，最终没能解决，真滴神了，我一直去改后端跨域的问题，我前前后后怕是用了四五种种跨域的解决办法，发现不顶用，还是无法携带。

扫描二维码关注公众号，回复： 16000974 查看本文章

于是乎我请教了大佬去了，经过大佬简单的询问，当问到我前端是否做了跨域处理时，我恍然大悟！！！

前端没有做跨域请求，会被浏览器限制一些东西。

于是成功解决了这个问题！！！

下面是我 前端+后端 解决前后端分离在不同服务器上的跨域的方法：

前端解决跨域问题

在 Vue 项目下的 vue.config.js 文件中添加下面的代码（较老的 Vue 版本中，下面的代码需要添加在 config 文件夹下的 index.js 文件中）

module.exports = {
    
    
    publicPath: './',
    productionSourceMap: false,
    devServer: {
    
    
        proxy: {
    
    
            '/api': {
    
    
                target: "http://XXX.XXX.XXX.XXX:8058", // 访问的后台地址
                changeOrigin: true,
                pathRewrite: {
    
     // 重写地址 你的接口地址是'http://10.10.1.10/login' 你请求得时候地址只需要写'/api/login'
                    '/api': ''
                }
            }
        }
    }
};

上述代码，表示启用了一个代理，然后通过重写地址进行亏跨域处理

这样前端访问的地址可以不需要写域名+端口号了，直接使用定义好的前缀即可。

比如：http://XXX.XXX.XXX.XXX:8080/login 等同于 /api/login

注意：这里又一个坑，修改了上述文件后，需要你重新启动 Vue 项目，否则无法生效

后端解决跨域问题

后端我使用的是 SpringBoot 框架。自定义一个配置类，在配置类中添加跨域处理。

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * MVC 自定义配置类
 */
@Configuration
public class MyMvcConfig implements WebMvcConfigurer {
    
    

    /**
     * 解决跨域问题
     */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
    
    
        registry.addMapping("/**")
                .allowedHeaders("*").allowedMethods("*")
                .allowedOrigins("*").allowCredentials(true);
    }
}

标题2021-07-05 更新：

最近在做学年设计的过程中，在做到前后端跨域问题的时候，面对曾经踩过的坑，我轻轻松松的跨过去了。

谁知道这次又发生了另一个跨域错误：

java.lang.IllegalArgumentException: When allowCredentials is true, allowedOrigins cannot contain the special value "*" since that cannot be set on the "Access-Control-Allow-Origin" response header. To allow credentials to a set of origins, list them explicitly or consider using "allowedOriginPatterns" instead.

又花了一点功夫，百度了一波，把他改正确了，原因如下：

1. SpringBoot 升级到 2.4.0 之后，才会出现的问题
2. allowCredentials设置为true后，不能将allowedOrigins设置为*

原后端程序修改为：

@Override
publicvoidaddCorsMappings(CorsRegistryregistry){
    
    
	registry.addMapping("/**")
		.allowedHeaders("*").allowedMethods("*")
		.allowedOriginPatterns("*").allowCredentials(true);
}