vue登录登出，解决跨域及cookies问题

分手后的思念是犯贱 2024-04-01 11:11 95阅读 0赞

#### vue登录登出，跨域及cookies ####

*  最近在写vue登录时遇到跨域问题，这里记录一下
 *   *  1.首先创建配置类，配置允许跨域
     *  2.配置过滤器，对登录接口放行不做校验，对其它请求路径进行拦截（并获取cookie信息）
     *  3.创建登录接口，验证用户信息并回写cookies
     *  4.登录成功后可以看到浏览器中已经存在cookie信息
     *  5.登出功能（前端编写axios请求）
     *  6.过滤器会对此请求进行拦截，并查询是否存在cookie
     *  \*\*7.要解决上述问题需要修改filter中的信息，手动配置响应头信息，修改后为\*\*
     *  8.再次执行登出操作(值的注意的是这里axios请求了两次post方法，这是正常现象。

## 最近在写vue登录时遇到跨域问题，这里记录一下 ##

**登录使用cookies记录用户信息，并使用过滤器对请求路径进行过滤**

### 1.首先创建配置类，配置允许跨域 ###

![在这里插入图片描述][3fedcfd6a6034d9d85135482bd40e541.png]

### 2.配置过滤器，对登录接口放行不做校验，对其它请求路径进行拦截（并获取cookie信息） ###

![在这里插入图片描述][2c81c4b14d104300b5534d628c9d8a66.png]

![在这里插入图片描述][9e44706d4a1648b18f0180937383954e.png]  
![在这里插入图片描述][8019790597294346bf8c9f644c0ff030.png]

![在这里插入图片描述][8dd9350f0c114a2eab84b1664cfcb1cc.png]

### 3.创建登录接口，验证用户信息并回写cookies ###

![在这里插入图片描述][32dcb56f81c846f18304c29f04393aac.png]

### 4.登录成功后可以看到浏览器中已经存在cookie信息 ###

![在这里插入图片描述][ca373f908e334bd6b8855e1dffaa0a59.png]

### 5.登出功能（前端编写axios请求） ###

![在这里插入图片描述][c23cbe9a62814b68b975a0916e7c1665.png]

### 6.过滤器会对此请求进行拦截，并查询是否存在cookie ###

通过程序可以看出此时后台并没有接收到cookie信息，并执行else向前端响应错误信息  
![在这里插入图片描述][d8002ee8b9bb4d0384ecb6865a5b5f72.png]

![在这里插入图片描述][9c56e8b9842d4669afbb93bfb45c44e3.png]  
但此时浏览器却报了跨域的问题，错误信息并没有回写  
![在这里插入图片描述][5eae85e7fe4b4a278997c76904077baf.png]  
*明明已经配置跨域了，为什么还会有跨域的问题呢：  
通过查阅资料了解到，filter的执行顺序是在请求进入servlet之前执行的，而我们配置的跨域配置类是在servlet之后才进行加载，所以，我们配置的跨域信息在过滤器中并没有生效，因此在filter中我们执行回写方法，向前端回写信息时，还是存在跨域。*

### **7.要解决上述问题需要修改filter中的信息，手动配置响应头信息，修改后为** ###

![在这里插入图片描述][39abc5a953cf46c1b4c3011a9ac9470b.png]

servletResponse1.setHeader("Access-Control-Allow-Credentials","true");
    servletResponse1.setHeader("Access-Control-Allow-Headers","Origin,X-Requested-With,Content-Type,Accept");
    servletResponse1.setHeader("Access-Control-Allow-Methods","GET,PUT,POST,DELETE,OPTIONS");
    servletResponse1.setHeader("Access-Control-Allow-Origin","http://localhost:8080");

### 8.再次执行登出操作(值的注意的是这里axios请求了两次post方法，这是正常现象。 ###

所有跨域的js在提交post请求的时候，如果服务端设置了可跨域访问都会默认发送两次请求，第一次是预检请求，查询是否支持跨域，第二次才是真正的post提交)  
![在这里插入图片描述][0c583cf9d3b049ea84c5beeb32831a18.png]  
当第一次请求到来时，没有携带cookie，过滤器依然执行else方法，但我在这里手动配置请求头信息支持跨域。那么第二次请求中会携带着cookie  
第一次请求，cookie为空，执行else中的内容，设置响应请求头允许跨域  
![在这里插入图片描述][08f5b8fb12604563904872ec571a3806.png]  
执行else内容  
![在这里插入图片描述][a0b74399b5894566bac3ad3127f1c6e7.png]  
第一次请求结束后紧接着过滤器会对第二次请求进行拦截，并查询到cookie，根据业务需求执行校验，并放行  
![在这里插入图片描述][cfac66b4eeba4cf393df7cfd5b3f8d79.png]  
总结：**当使用过滤器对路径进行过滤操作时，webmvcconfig配置类中配置的跨域条件不会生效，需要在过滤器中手动配置响应头中的参数信息，使请求允许跨域**

[3fedcfd6a6034d9d85135482bd40e541.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/1f5cca6de4764271aebdbf1d0f28a1b8.png
[2c81c4b14d104300b5534d628c9d8a66.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/634883a3a72f40be83f54ca7321019ba.png
[9e44706d4a1648b18f0180937383954e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/b82a4e607cd441a79c6c54f0c19c9310.png
[8019790597294346bf8c9f644c0ff030.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/02cfadf1760a434b9abda596e9c61642.png
[8dd9350f0c114a2eab84b1664cfcb1cc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/a82fa547f2d941fc8934f893ee57aa15.png
[32dcb56f81c846f18304c29f04393aac.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/a78644917d6d49d58d6d640b18343784.png
[ca373f908e334bd6b8855e1dffaa0a59.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/c522f91797374b58b6d85b21a677ceb6.png
[c23cbe9a62814b68b975a0916e7c1665.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/db0211488aea433991bdbc628face5eb.png
[d8002ee8b9bb4d0384ecb6865a5b5f72.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/81fe32bb778644d1a5542f45c9b19499.png
[9c56e8b9842d4669afbb93bfb45c44e3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/f0111dca1d9b47ae9c1620cdf2d6968d.png
[5eae85e7fe4b4a278997c76904077baf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/0b3c6cf47d79462d9c3529f4e9fd8225.png
[39abc5a953cf46c1b4c3011a9ac9470b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/982a8dd334ea4bcabf2470cd8403bb2b.png
[0c583cf9d3b049ea84c5beeb32831a18.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/06e105f7b99b48ef8653d14cbc12e9d8.png
[08f5b8fb12604563904872ec571a3806.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/9ed53016bea54897a13f0f635ca144f7.png
[a0b74399b5894566bac3ad3127f1c6e7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/5226d17e63fd43d5af97b39c90a07fb9.png
[cfac66b4eeba4cf393df7cfd5b3f8d79.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/ee606bac92324e9e956f17fb5ab2f923.png