vue axios请求后端接受不到token的问题。
相关概念
什么是跨域?
跨域指的是在浏览器环境下,当发起请求的域(或者网站)与请求的资源所在的域之间存在协议、主机或端口中的任何一个条件不同的情况。换句话说,只要协议、主机或端口中有一个不同,就会被认为是跨域请求。
具体来说,以下情况都属于跨域请求:
- 域名不同:例如从
https://www.example.com
向https://api.example.com
发送请求。 - 端口不同:例如从
https://www.example.com:8080
向https://www.example.com:3000
发送请求。 - 协议不同:例如从
http://www.example.com
向https://www.example.com
发送请求。
axios请求后端接受不到token
具体看下面博客:
vue中axios发送OPTIONS预检请求的原因及如何通过_vue预请求_millet109的博客-CSDN博客
后端接收不到前端传入的header参数信息 - 简书 (jianshu.com)
浅谈:
axios默认发的是复杂请求;而cors复杂请求;会先发一次options预请求,所以我们进行token
校验必须要先把第一次options请求过滤出去。
但是,这里又一个问题,我们通过springMvc设置跨域代买如下:
@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
// 注册 CORS 配置
registry.addMapping("/**")
.allowedOriginPatterns("*")
.allowedHeaders("*")
.allowCredentials(true)
.allowedMethods("GET","POST","PUT","DELETE") // 注意就是要请求方式上,要改成全部
.maxAge(3600);
}
}
但其实我们自定义了一个filter,并不受springmvc设置的跨域管理,因此,我们需在filter自定逻辑判断。
实例代码如下:
// 1.排除options请求,防止报错
if(!request.getMethod().equals("OPTIONS")){
token = request.getHeader("Authorization").substring(6); // 没有token,这路为null
}
// 设置跨域
response.setHeader("Access-Control-Allow-Origin", "*"); // 允许所有域名跨域请求
response.setHeader("Access-Control-Allow-Methods", "*"); // 允许所欲方法跨域亲够
response.setHeader("Access-Control-Allow-Headers", "*"); // 允许请求头设置人和自定义信息
// 预检请求缓存时间(秒),即在这个时间内相同的预检请求不再发送,直接使用缓存结果。
response.setHeader("Access-Control-Max-Age", "3600");
后端响应cookie,前端接收不到
后端
允许跨域请求携带凭证信息
response.setHeader("Access-Control-Allow-Credentials", "true");
上面跨域需要更改:
服务器server端要配置Access-Control-Allow-Origin到以上配置为止,发送ajax请求,我们发现还会出现一个错误,提示我们 Access-Control-Allow-Origin 不能用 * 通配符。原因是:当服务器端 Access-Control-Allow-Credentials = true时,参数Access-Control-Allow-Origin 的值不能为 '*' 。我们重新设置Access-Control-Allow-Origin的值,当服务器端接收到请求后,在返回响应时,把请求的域Origin填写到响应的Header信息里(即谁访问我,我允许谁),代码如下:
response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
前端
设置withCredentials = true文章来源:https://www.toymoban.com/news/detail-695627.html
文章来源地址https://www.toymoban.com/news/detail-695627.html
到了这里,关于因为axios请求后端,接收不到token的问引出的问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!