一号坑

问题描述

当我们的项目是前后端分离的模式时,vue不会自动帮我们保存后端传来的cookie!

解决方案

我们需要在main中添加axios.defaults.withCredentials = true

二号坑

问题描述

如果你之前处理过跨域方面的问题,应该会记得你曾经在后端请求头添加了一句response['Access-Control-Allow-Origin'] = "*" 我当前用的是django作为后端,如果你是用的是其他的后端可能写法不太一样,但如果你在响应头中写了通配符*那大概率就会出现下图所示的问题(如果你这里写的是具体来源地址,可能二号坑的问题你就碰不到。)

解决方法

上述提示的蛮清楚的,它提示不能使用通配符*了,因为我们使用了axios.defaults.withCredentials = true,这里我们只需要改成response['Access-Control-Allow-Origin'] = "http://127.0.0.1:8080"(注意:http://127.0.0.1:8080指的是前端的地址!)
不过这里有个很大很大的坑,如果你是在本地使用,切记要使用127.0.0.1,不能使用localhost如果你在后端写了http://localhost:8080/,然后用http://localhost:8080/访问还是会报错!必须要在后端写http://127.0.0.1:8080然后哪http://127.0.0.1:8080访问才行!!!下面是我django添加中间件的全过程,如果你没有添加中间件,可以模仿我的Django添加一下!

# 当前文件路径 -> 项目名称/项目名称/middlewares.py  (和setting.py设置文件相同目录中)
# 用于解决跨域请求问题
from django.utils.deprecation import MiddlewareMixin

class 允许跨域(MiddlewareMixin):

    def process_response(self, request, response):
        # 允许跨域请求的地址 (*代表所有地址)
        response['Access-Control-Allow-Origin'] = "http://127.0.0.1:8080"
        # 允许跨域请求的类型
        response['Access-Control-Allow-Headers'] = "X-Requested-With,Content-Type"
        # 允许跨域请求的方式
        response['Access-Control-Allow-Methods'] = "PUT,POST,GET,DELETE,OPTIONS"
        # 允许跨域请求携带cookie
        response['Access-Control-Allow-Credentials'] = "true"

        return response

然后在设置的中间件中添加
'项目名称.middlewares.允许跨域'

总结

解决上述的问题后,我们应该就能愉快的吃到饼干