Safari http request header is not reflecting on axios interceptor's change

Question

In my Vue + Laravel SPA application, when I change request header's Authorization from "Basic " to "Bearer", Chrome can send http request with "Bearer" header but in Safari still using "Basic " even though I changed Authorization in axios interceptors.

Why do they behave differently? How can I fix it? Any help tanks. * Details

.htaccess Basic Auth settings. All request needed Basic Auth credential but 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 settings for 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
}

when I do console.log(config), it shows "Bearer + JWTtoken" but when I check Safari's network console it uses "Basic " and it fails by jwt 401 with message "token is not provided".

Safari(13.1)

Max Proske Max Proske · Accepted Answer · 2020-05-23T05:59:52

Basic Auth and Bearer Auth use the same Authorization header. Chrome, Firefox, and Edge can authenticate with a username/password and pass a JWT. However, Safari 12+ will always override the Authorization header with the Basic Auth credentials.

The solution to your issue is to use a custom header for authorization (eg. x-access-token).

Safari http request header is not reflecting on axios interceptor's change

1 Answers