jQuery Ajax 设置请求头

在项目中采用token来验证用户登录,运作机制大致如下

用户首次登录成功时,server-end发送token到client,client存入cookie。

用户做任何请求操作时,在ajax的headers里带上token,用以server-end做登录状态验证。

复制代码
 请求
$.ajax({
          type: type,
          timeout: 10000, // 超时时间 10 秒
          headers: {
              'Access-Token':$.cookie('access_token')
          },
          url: url,
          data: data,
          success: function(data) {
          },
          error: function(err) {
          },
          complete: function(XMLHttpRequest, status) { //请求完成后最终执行参数 
          }
      })

报错:

Request header field Access-Token is not allowed by Access-Control-Allow-Headers in preflight response.

1

其中Access-Control-Allow-Headers 首部字段用于预检请求的响应。其指明了实际请求中允许携带的首部字段。参考MDN

查阅了很多参考资料以及各位前辈踩坑记录,得到如下总结:

报错意思是请求头中的Access-Token字段在Access-Control-Allow-Headers中没有被设置为允许.

谁来设置?

一种是font-end自己设置,在ajax在中设置beforeSend

复制代码
$.ajax({
         type: type,
         timeout: 10000, 
         beforeSend: function(xhr) {
              xhr.setRequestHeader("Access-Toke");
         },
         headers: {
             'Access-Token':$.cookie('access_token')
         },
         url: url,
         data: data,
         success: function(data) {
         },
         error: function(err) {
         },
         complete: function(XMLHttpRequest, status) { //请求完成后最终执行参数 
         }
});

希望对大家有所帮助

相关推荐
没烦恼30115 分钟前
登录表单提交:按钮点击事件 vs form submit事件,该如何选择?
javascript
xiguolangzi15 分钟前
vue3 字体管理
前端
伍华聪32 分钟前
基于Vant4+Vue3+TypeScript的H5移动前端
前端
Nayana33 分钟前
axios-取消重复请求--CancelToken&AbortController
前端·axios
大舔牛41 分钟前
网站性能优化:小白友好版详解
前端·面试
转转技术团队1 小时前
你的H5页面在折叠屏上适配了吗?
前端
北辰浮光1 小时前
[Web数据控制]浏览器中cookie、localStorage和sessionStorage
前端·vue.js·typescript