前后端分离无法携带 cookie 坑点(Vue+SpringBoot 跨域问题)
配置了跨域,未解决跨域问题,检查发现是没有携带 Cookie 原因。出现java.lang.IllegalArgumentException: When allowCredentials is true, allowedOrigins cannot contain the special value "*" since that cannot be set on the "Access-Contr
技术框架:
- 前端:Vue-cli 2.X
- 后端:SpringBoot+MyBatis
本人由于接了甲方的项目,最近赶项目的时候,遇到了一个坑点。
由于我们分工合作,前端由我的小伙伴去写,我将写好了一部分接口的项目打包放到了腾讯云服务器上,方便前端去测试,但是出现了一个坑点。
前后端交互的时候,出现登录后的操作,被后端拦截器拦截了!!!
做前端的小伙伴,和我说这个问题的时候,我果断的告诉他你前端发送请求的时候,需要设置它携带 Cookie
刚刚好我的小伙伴,用的 axios 来发送请求。
于是一顿操作猛如虎,在 Vue 项目下的 main.js 文件下加上
axios.defaults.withCredentials = true
很快前端的小伙伴传来了消息,说我搞事情,不行的!!!
于是头铁的我,拿了前端的项目来自己测试,又是一顿猛如虎的操作,测试后,发现了问题的所在。
当我将前端请求的域名地址,改到了我自己本地上的时候,发现它神奇的携带了,惊呆了!
于是我很快的想到了,是跨域问题。
又开始了一顿操作,最终没能解决,真滴神了,我一直去改后端跨域的问题,我前前后后怕是用了四五种种跨域的解决办法,发现不顶用,还是无法携带。
于是乎我请教了大佬去了,经过大佬简单的询问,当问到我前端是否做了跨域处理时,我恍然大悟!!!
前端没有做跨域请求,会被浏览器限制一些东西。
于是成功解决了这个问题!!!
下面是我 前端+后端 解决前后端分离在不同服务器上的跨域的方法:
前端解决跨域问题
在 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.
又花了一点功夫,百度了一波,把他改正确了,原因如下:
- SpringBoot 升级到 2.4.0 之后,才会出现的问题
- allowCredentials设置为true后,不能将allowedOrigins设置为*
原后端程序修改为:
@Override
publicvoidaddCorsMappings(CorsRegistryregistry){
registry.addMapping("/**")
.allowedHeaders("*").allowedMethods("*")
.allowedOriginPatterns("*").allowCredentials(true);
}
更多推荐
所有评论(0)