Safari http 请求 header 没有反映 axios 拦截器的变化

Question

在我的 Vue + Laravel SPA 应用程序中，当我将请求标头的授权从“Basic”更改为“Bearer”时，Chrome 可以发送带有“Bearer”header 的 http 请求，但在 Safari 中仍然使用“Basic”，即使我在 88269280884 中更改了授权

为什么他们的行为不同？ 我该如何解决？ 任何帮助坦克。 * 细节

.htaccess 基本身份验证设置。 所有请求都需要 Basic Auth 凭证，但 Jwt。

<IfModule mod_rewrite.c>
    <IfModule mod_negotiation.c>
        Options -MultiViews -Indexes
    </IfModule>

    RewriteEngine On

    # Handle Authorization Header
    RewriteCond %{HTTP:Authorization} .
    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

    # Redirect Trailing Slashes If Not A Folder...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} (.+)/$
    RewriteRule ^ %1 [L,R=301]

    # Handle Front Controller...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [L]
</IfModule>

Satisfy Any

AuthUserfile .htpasswd
AuthGroupfile /dev/null
AuthName "Enter your ID and PASSWORD"
AuthType Basic
require valid-user

SetEnvIf Authorization "(Bearer)" jwt_request
Order Deny,Allow
Deny from all
allow from env=jwt_request

<Files "service-worker.js">
   Require all granted
</Files>

axios 设置为 jwt

axios.interceptors.request.use(config => {
  config.headers['X-Requested-With'] = 'XMLHttpRequest'
  const token = store.getters['auth/token']
  if (token) {
    config.headers['Authorization'] = 'Bearer ' + token
  }
  return config
}

当我执行 console.log(config) 时，它显示“Bearer + JWTtoken”，但是当我检查 Safari 的 .network 控制台时，它使用“Basic”并且它失败了 jwt 401 并显示消息“未提供令牌”。

野生动物园(13.1)

Answer 1

Basic Auth 和 Bearer Auth 使用相同的Authorization header。Chrome、Firefox 和 Edge 可以使用用户名/密码进行身份验证并传递 JWT。但是，Safari 12+ 将始终使用 Basic Auth 凭据覆盖Authorization header。

您的问题的解决方案是使用自定义 header 进行授权（例如x-access-token ）。