前端vue，拦截了登录后台后，返回的token，requests拦截token,但是发送请求的时候，就出现跨越异常

请求与响应的代码如下，用户输入用户名和密码，获取响应后，把token保存在localstorage里面，在请求中获取token,设置请求，将token的值，塞到headers的token字段中

这个是后台的代码，设置了允许跨越访问，前台登录，返回的都是200，但是访问getAllUser()接口的时候，就报跨越错误。

登录成功，返回了token:

前端请求拦截，打印的token:

使用getAllUser接口，发送请求时，在headers中，都可以看到token，但是，却显示跨越失败：

使用postman验证过，headers加上token，是可以正常访问getAllUser的，所以，应该是客户端vue，有问题

1个评论

50个牛币 vue 登录异常跨域访问

所有回答列表(6)

liuqingfang LV2 2021年12月10日

利用反向代理将请求源给代理一下

请叫我小C LV19 2022年2月21日

试试在拦截器里转码一下

// 加入如下代码试试
let url = config.url
if (config.method === 'get' && config.params) {
    url = url + '?' + qs.stringify(config.params, { indices: false });
    config.params = {}
}
config.url = url
return config

祝阿伟 LV3 2022年6月17日

配置一些反向代理

flexiblezl 2022年10月5日

翻了下我 2019 年的代码, 这样解决

CorsConfiguration config = new CorsConfiguration();
config.setAllowCredentials(Boolean.TRUE);
config.addAllowedMethod("*");
config.addAllowedOrigin("*");
config.addAllowedHeader("*");
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(new PathPatternParser());
source.registerCorsConfiguration("/**", config);
return new CorsWebFilter(source);

全栈小白 LV34 2022年12月11日

这种情况一般是开发环境Vue本地配置代理服务器解决跨域，生产环境通过nginx代理同源解决，问题不是很大

微信网友_6658091507814400 LV3 2023年9月21日

你提到在前端Vue中拦截了登录后台返回的token，并在requests中拦截token，但在发送请求时出现了跨越异常。这可能是由于以下原因引起的：

请求拦截顺序错误：在Vue中，请求可能被不同的拦截器拦截，并且拦截器的执行顺序可能不正确。请确保你在请求拦截器中正确设置了拦截顺序，以避免请求被其他拦截器错误地修改或覆盖。
请求参数错误：在拦截器中修改请求参数时，请确保你正确地修改了请求参数，并且没有引入额外的错误。特别要注意的是，不要修改请求主体（body）中的参数，因为这可能导致请求被服务器拒绝。
拦截器使用不当：在使用拦截器时，请确保你正确地使用了拦截器函数，并且没有引入额外的错误。例如，在拦截器函数中修改了错误的属性或未正确设置响应头等，都可能导致跨越异常。
服务器端异常：除了前端拦截器中的错误外，还可能是服务器端出现了异常。请确保服务器端正确地处理了请求并返回正确的响应。如果服务器端返回了错误响应或状态码，前端拦截器无法解决这个问题。

要解决前端Vue中拦截器导致的跨越异常问题，需要仔细检查上述可能的原因，并对代码进行逐行调试和排查。

最热评论
最新问答