电子商务网站建设含代码,网站背景怎么设置,如何做一个自己的网站呢,建设银行悦生活网站vue axios请求后端接受不到token的问题。 相关概念 什么是跨域#xff1f;
跨域指的是在浏览器环境下#xff0c;当发起请求的域#xff08;或者网站#xff09;与请求的资源所在的域之间存在协议、主机或端口中的任何一个条件不同的情况。换句话说#xff0c;只要协议、…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 {Overridepublic 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
