跨域问题以及携带token问题总结

项目前后端分离,未上线时。前端所用的服务器与后端给的接口不同源,导致访问出现下图的情况:
(同源就是协议,域名,端口一模一样;只要有一个不同就是不同源)
在这里插入图片描述
参考了很多文档视频,意思是解决起来两种办法:
第一,使用jsonp,就是通过script标签获取后端接口发送过来的数据通过js实现,原理建议参考2小时掌握前端9种跨域解决方案的第28分钟开始,有示例。
但是jsonp只能解决get请求,这也是它的一个缺点。而且也不安全。
第二,就是修改CORS跨域资源共享 相关设置。就是在服务器端配置好。
跨域问题以及携带token问题总结_第1张图片
具体每一项的含义推荐去看HTTP-headers
这里边注意文档中给的语法,有的可以使用*,但是有的需要写出每一个header
跨域问题以及携带token问题总结_第2张图片
我的项目登录时后台会给前端的response data中返回一个token和refresh_token。除了登陆操作,所有的ajax操作都需要带着token这个请求头去访问,如果token过期了,通过refresh_token重新请求一个新的token。token失效或者无效都强制重新登陆。
踩坑次数过多,发现只要在服务端设置(python语言)

res.headers["Access-Control-Allow-Headers"] = "Content-Type,token,refresh_token"
res.headers['Access-Control-Expose-Headers'] = 'Origin,Accept,Content-Type,token,refresh_token'

其他语言道理应该是相同的,
响应首部 Access-Control-Expose-Headers 列出了哪些首部可以作为响应的一部分暴露给外部。
设置后端给你返回的Response Headers,
跨域问题以及携带token问题总结_第3张图片
默认情况下
跨域问题以及携带token问题总结_第4张图片

所以基于自己的需求,就在服务端设置了res.headers[‘Access-Control-Expose-Headers’] = 'Origin,Accept,Content-Type,token,refresh_token’

请求头 Access-Control-Request-Headers ,用于通知服务器在真正的请求中会采用哪些请求头。
那肯定得通过token,refresh_token请求头。
res.headers[‘Access-Control-Expose-Headers’] = ‘Origin,Accept,Content-Type,token,refresh_token

你可能感兴趣的:(前端)