《Laravel 7 中文文档》 Sanctum 轻量级 API 认证

同学分享

使用 axios 和 umi-request 所带的头部不一样

使用 sanctum 来做后台的登录接口授权。前端请求一种使用 axios，另外一种使用 umi-request，同一份代码，所带过来的头部不一样。有对这方面熟悉的朋友帮忙解答么。

详细描述

接口： admin.com/admin/api/sanctum/csrf-co...

axios General

# General
Request URL:http://admin.com/admin/api/sanctum/csrf-cookie
Request Method:GET
Status Code:204 No Content
Remote Address:192.168.10.10:80
Referrer Policy:no-referrer-when-downgrade

umi-request General

# General
Request URL: http://admin.com/admin/api/sanctum/csrf-cookie
Request Method: GET
Status Code: 204 No Content
Remote Address: 192.168.10.10:80
Referrer Policy: no-referrer-when-downgrade

axios Response Headers

# Response Headers
Cache-Control: no-cache, private
Connection: keep-alive
Date: Fri, 08 May 2020 08:22:05 GMT
Server: nginx/1.15.8
Set-Cookie: XSRF-TOKEN=eyJpdiI6IlBic2dodzdVNVhYdHM4aUx4WjZsQkE9PSIsInZhbHVlIjoib3dXS0VKQktwZktIK0ovdzd5dVJIUHVuZTc3eG0zeFFDcjVHNE00UlpSS1U2WDdIUGQwRVRjOHNCbVdjUzFwaSIsIm1hYyI6ImEzY2E1MzUxNWE4ZDY2ZWE0ZTI4ZjllM2NlYTg1ZjVkNWIyMGNiM2M1NmYwOTI1M2RkN2E2M2NlZWIwODhiYzcifQ%3D%3D; expires=Fri, 08-May-2020 10:22:05 GMT; Max-Age=7200; path=/; samesite=lax
Set-Cookie: admin_session=eyJpdiI6IndxMnRTVXRxd3lnRmdFRVVubUJYQWc9PSIsInZhbHVlIjoiMjdEODhxbWc5dFRYVHZ2RmREb3lzak1MQVlvWXFpQXZRek5za3BCblp6ZTIzR3BGMWpWQW1WZ3NxbE5PSk5LTSIsIm1hYyI6IjZiMTcxYmQ4OWZkMTNkMWNjZjY0MDI1YzMxMWUwY2MwNTc1OTBiZDQyNDk2MjRkNDY3YzBlMTJkMzA3MzE0ZTcifQ%3D%3D; expires=Fri, 08-May-2020 10:22:05 GMT; Max-Age=7200; path=/; httponly; samesite=lax

umi-request Response Headers

# Response Headers
Cache-Control:no-cache, private
Connection:keep-alive
Date:Fri, 08 May 2020 08:23:27 GMT
Server:nginx/1.15.8
Set-Cookie:XSRF-TOKEN=eyJpdiI6IktvY3hMMC9iQXpEYkNVRnovNGI4UUE9PSIsInZhbHVlIjoiQmJEQmFZVXFONVNRRjlORDYvTnpxVjhJVjJ1RzFVNkNteUZyTDVlL2pybHZjeFNOZTFTQVBIdHpNazFHd0phWSIsIm1hYyI6IjY1NDhlM2QwNWE1NTJiZmJlNjQ2NDAwOGY5OTRmODRkZDk3YTI1YmI1MzgzNDVlNWRiY2RhNjFkNjBmMTI4ZDcifQ%3D%3D; expires=Fri, 08-May-2020 10:23:27 GMT; Max-Age=7200; path=/; samesite=lax
Set-Cookie:admin_session=eyJpdiI6IlVNZ2pUb0NqTTI3cU9ZN1JnbFJFUUE9PSIsInZhbHVlIjoiNWZFQVZYOFMrTElQM25IOEJSTUFLR0R6NDVDQnFWMFc1OUxTd2ZSQnZYbzFjc3JNcS9LR215d0cwWkRQYkxnKyIsIm1hYyI6IjhlZWJjOWRkYmZjMDQ3ODU2ZDdiOTRlNjk5NzU2MDE4NzlmN2E2NjE1ZWYzN2Y2ODJlMDNlZWVhZDJlMGUyMzAifQ%3D%3D; expires=Fri, 08-May-2020 10:23:27 GMT; Max-Age=7200; path=/; httponly; samesite=lax

axios Request Headers

# Request Headers
Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9
Connection: keep-alive
Cookie: XSRF-TOKEN=eyJpdiI6IkRaVFBCS01UOERBNDVxRnFFS0FGNWc9PSIsInZhbHVlIjoiOGo4MzJpTTljSGVLa2EyTXF3OVV4TGNjdm5GRHE3T2Q3R0N4Q0VoQjhqVkFlV1l6Tm9CcVVnM29aWVY5RGtwTCIsIm1hYyI6IjlkZTJiNWE5NjBhNjdhNWYyZTRmYTNmM2EwZWNmYzUzYWQ5Zjk0NjU2MDYxZjYxYTQxNTUwZDgyN2U0Mjc4NzgifQ%3D%3D; admin_session=eyJpdiI6IjlNOVJkelJOdEgvanh2Uk4vZlBxS2c9PSIsInZhbHVlIjoiUUNWOUluVzdaN2tWQjRqLzRiY2ExTGpFSFUrcFZka0Ewb2hTd1lUbzZBYmh4M09nVXBqREt6dEZKU0NHNDNYTSIsIm1hYyI6ImVlNjJiYTg3ZjI5YjFhMDY0OWY0YWU3YWNkZmY5YTAwOGY3OTdlNzY3MTE2YzczYzcyYzA5OWU3YTk1MGYwYjIifQ%3D%3D
Host: admin.com
Referer: http://admin.com/react/
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.87 Safari/537.36
X-XSRF-TOKEN: eyJpdiI6IkRaVFBCS01UOERBNDVxRnFFS0FGNWc9PSIsInZhbHVlIjoiOGo4MzJpTTljSGVLa2EyTXF3OVV4TGNjdm5GRHE3T2Q3R0N4Q0VoQjhqVkFlV1l6Tm9CcVVnM29aWVY5RGtwTCIsIm1hYyI6IjlkZTJiNWE5NjBhNjdhNWYyZTRmYTNmM2EwZWNmYzUzYWQ5Zjk0NjU2MDYxZjYxYTQxNTUwZDgyN2U0Mjc4NzgifQ==

umi-request Request Headers

# Request Headers
Accept: */*
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9
Connection: keep-alive
Cookie: XSRF-TOKEN=eyJpdiI6IlhMSmMwYkdYbGtZOVEwRkQxWHdZaUE9PSIsInZhbHVlIjoiQ1REUkRjUXArQmE5WXdCamlDUlNhWFcxOU92aXlCd1RNenVFNVVOaXJzL0RUeGZtbFF5LzlhTWxZNFNVMzhYeSIsIm1hYyI6IjAyYjFjZGI5ZDAyNWUxOWZlMDYzZDEyMjhmZmNjYTljYzI4M2ZkYzYyMDUzNjA2ZGJiZjJmZDk0ZmVjZTBiYWMifQ%3D%3D; admin_session=eyJpdiI6ImYvelJCcG03OS8zQ2RqMnJLWTkybUE9PSIsInZhbHVlIjoiMEdGWk9oL2tCK012UmFOWGR2WXh1YzJkNGNSV2RoVnp6NHVoTlRFM2xpTXFsUmI3aThZU25xYjhMZFlnanMrTCIsIm1hYyI6Ijk3OTcyZmYzOWNjODMyYjRhZmRkNzUwNjM4Zjk4ZjQyMzU4MTU5NTUzZGFkODQwN2M5MDNmZjhmNmVmMjljMTMifQ%3D%3D
Host: admin.com
Referer: http://admin.com/admin-react/
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.87 Safari/537.36

axios 通过 axios.defaults.withCredentials 来配置是否携带 cookie

umi-request 通过credentials来配置是否携带 cookie。
对比看， axios 比 umi-request 的 Request Headers 中多了一个 X-XSRF-TOKEN, 以及 Accept 有所不同。axios是默认带上去的。有熟悉的朋友可以解答么。

直播间熊猫血虚幻之物对应着冥冥之路！

七月羽歌

课程读者 87 声望

美的事物是永恒的喜悦。

0 人点赞

从零开发一个电商项目，功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等

以构建论坛项目 LaraBBS 为线索，展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。

讨论数量: 4

七月羽歌

课程读者 87 声望

axios 会将 cookie 中的 X-XSRF-TOKEN 头赋给 Request Headers 中。

umi-request 不会自动。

4年前评论

七月羽歌

课程读者 87 声望

Laravel 还会将 CSRF 令牌保存到名为 XSRF-TOKEN 的 Cookie 中，你可以使用该 Cookie 值来设置 X-XSRF-TOKEN 请求头。

一些 JavaScript 框架，比如 Angular 和 Axios，会为你自动进行设置，基本上你不太需要手动设置这个值。

最后，VerifyCsrfToken 中间件框架底层实现源码位于 vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/VerifyCsrfToken.php

解释之一

4年前评论

七月羽歌

课程读者 87 声望

如果是 umi-request，可以在拦截器中，Hearders 中加入 X-XSRF-TOKEN，也可以在 extend 中扩展，如下：

import { extend } from 'umi-request';

const request = extend({
  prefix: '/admin',
  errorHandler,
  credentials: 'include', 
  headers: {
    'X-XSRF-TOKEN': getCookie('XSRF-TOKEN'),
  },
});

function getCookie(value) {
  const reg = new RegExp(`(^| )${value}=([^;]*)(;|$)`);
  const arr = document.cookie.match(reg);

  try {
    if (arr) {
      return unescape(arr[2]);
    }
  } catch (error) {
    return null;
  }
  return null;
}

4年前评论

pingfan

XSRF-TOKEN 值是会变动的，所以在 extend 中扩展不太合适。umi3 的话可以在 middlewares 里面设置，也可以在 umi-request 拦截器中设置

七月羽歌（作者）（楼主）

@yanthink ts 的拦截器我过不了 pre-commit。其实是想在拦截器中做的。特意整个函数，以为会随着token变动而变动。谢谢哈。

七月羽歌（作者）（楼主）

@yanthink 现在已经到了 umi3了。就是喜欢ant-design-pro，才会舍弃很多东西去整这些。可要整这个，相关的一套套的都要学。

七月羽歌（作者）（楼主）

@yanthink 自己又有点洁癖，不想按照 ant-design-pro官网给的登录注册搞，那个太丑了。最近变动也比较大。

anran_1992

0 声望

想问下你是怎么解决的，我也在用antd_pro；后端是通过sessioncookie来校验是否登录的，以前用axios会自动带入到请求头中，现在用umi-request不会，需要如何添加呢？请指教

3年前评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容，与人为善，比聪明更重要！

帮助

使用 axios 和 umi-request 所带的头部不一样

详细描述

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

使用 axios 和 umi-request 所带的头部不一样

详细描述

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

请登录