生产中的Axios拦截器问题

Question

I am experiencing an issue when developing an application and attempting to utilize a refresh token. I am using ADFS for authentication, where I get an id_token that expires every hour and a refresh token that lasts 8 hours.

In development, the below script works perfectly as intended and reaches out to the server for a refresh.

In production, it gets new tokens, but it never retries the original request. I am trying to find out why it is different on webpack-dev-server vs production.

Any help would be much appreciated!

PS Using Babel Presets: babel-preset-env and babel-preset-stage-2

axios.js

import axios from 'axios'

// Set baseURL for development and production
const baseURL = process.env.NODE_ENV === 'development' ? '//localhost:3001/api' : '/api'

// Create instance of axios with correct baseURL
const instance = axios.create({
  baseURL
})

// Intercept responses
instance.interceptors.response.use((response) => {
  return response
}, async (error) => {

  // Pull config, status and data from the error
  const { config, response: { status, data } } = error

  // Pull tokens from local storage
  let currentTokens = JSON.parse(localStorage.getItem('tokens')) || null

  // If response errors at 401, token is still valid and we have tokens in localStorage
  if(status === 401 && data.token_invalid === undefined && currentTokens && !config._retry) {
    config._retry = true

    try {
      // Ask server for new token
      const authenticate = await instance.post('/user/login', {refresh_token: currentTokens.refresh_token})

      // Pull tokens and success from authenticated request
      const { tokens, success } = authenticate.data

      // If successful, set access_token, id_token, headers and localStorage      
      if(success) {
        currentTokens.access_token = tokens.access_token
        currentTokens.id_token = tokens.id_token

        const bearer = `Bearer ${tokens.id_token}`
        config.headers['Authorization'] = bearer
        Object.assign(instance.defaults, {headers: {Authorization: bearer}})

        localStorage.setItem('tokens', JSON.stringify(currentTokens))

        // Rerun original request
        return instance(config)
      }
    } catch (e) {
      // Catch any errors
      console.log(e)
      return
    }
  } else if(data && data.token_invalid !== undefined && data.token_invalid) {
    // If refresh has expired, take user to ADFS to reauthenticate
    location = `${process.env.OAUTH_CLIENT_EP}?client_id=${process.env.AZURE_CLIENT_ID}&redirect_uri=${process.env.REDIRECT_URI}&resource=${process.env.REDIRECT_URI}&response_type=code`
    return
  } else {
    // Console log all remaining errors
    return
  }
})

export default instance

Answer 1

Found the issue. It appears that since I'm using both relative and absolute urls for the baseURL, the absolute URL in development is being processed correctly, however the relative URL is being chained to the original request.

In other words, sending in production, the url looks like: /api/api/actual/request, where it should just be /api/actual/request.

I solved this by adding a API_URL to my config files, and input the absolute url for both development and production and the updated my instance creation to the following.

const instance = axios.create({
  baseURL: process.env.API_URL
})

Thanks to all who viewed and attempted to help. Have a great day everyone!