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

项目前后端分离,未上线时。前端所用的服务器与后端给的接口不同源,导致访问出现下图的情况:
(同源就是协议,域名,端口一模一样;只要有一个不同就是不同源)
在这里插入图片描述
参考了很多文档视频,意思是解决起来两种办法:
第一,使用jsonp,就是通过script标签获取后端接口发送过来的数据通过js实现,原理建议参考2小时掌握前端9种跨域解决方案的第28分钟开始,有示例。
但是jsonp只能解决get请求,这也是它的一个缺点。而且也不安全。
第二,就是修改CORS跨域资源共享 相关设置。就是在服务器端配置好。
在这里插入图片描述
具体每一项的含义推荐去看HTTP-headers
这里边注意文档中给的语法,有的可以使用*,但是有的需要写出每一个header
在这里插入图片描述
我的项目登录时后台会给前端的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,
在这里插入图片描述
默认情况下
在这里插入图片描述

所以基于自己的需求,就在服务端设置了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

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值