防止 nuxt auth 向外部 url 发送授权 header

Question

我想在我使用 nuxt auth模块的nuxt项目中使用axios向外部 API 发送 POST 请求。

当用户通过身份验证时 axios 似乎会自动添加授权 header （这很好，通常需要调用我的后端 API）。 但是，当调用外部 API 时，header 可能不会被接受并导致调用失败。

有什么方法可以指定应该为哪些 URL 添加或排除 auth header？

这是我的nuxt.config中 auth 和 axios 模块的配置

  // Axios module configuration
  axios: {
    baseURL: '//localhost:5000',
  },

  // Auth module configuration
  auth: {
    strategies: {
      local: {
        endpoints: {
          login: { url: '/auth/login', method: 'post', propertyName: 'token' },
          logout: { url: '/auth/logout', method: 'delete' },
          user: { url: '/auth/user', method: 'get', propertyName: 'user' },
        },
      },
    },
  }

更多背景知识：在我的特定用例中，我想将文件上传到 Amazon S3 存储桶，因此我创建了一个预签名的上传请求，然后想将文件直接上传到存储桶中。 只要用户未经过身份验证，这一切都很好。

const { data } = await this.$axios.get('/store/upload-request', {
  params: { type: imageFile.type },
})
const { url, fields } = data
const formData = new FormData()
for (const [field, value] of Object.entries(fields)) {
  formData.append(field, value)
}
formData.append('file', imageFile)
await this.$axios.post(url, formData)

我试图通过请求配置取消设置 Auth header：

const config = {
  transformRequest: (data, headers) => {
     delete headers.common.Authorization
  }
}
await this.$axios.post(url, formData, config)

这似乎阻止了添加所有与 formData 相关的标题。 还通过headers属性或在transformRequest function 在配置中设置任何 header 不起作用，这再次导致对外部 API 的调用显然会失败，而没有任何特定的标头

当我使用 nuxt axios 模块时，我不确定如何将拦截器添加到 axios 实例中，如此处或此处所述。

非常感谢任何有关在哪里找到帮助的帮助或提示：)

Answer 1

尝试以下

解决方案 1，在您的 plugins 文件夹中创建一个新的 axios 实例：

export default function ({ $axios }, inject) {
    // Create a custom axios instance
    const api = $axios.create({
        headers: {
            // headers you need
        }
    })
    // Inject to context as $api
    inject('api', api)
}

在 nuxt.config.js 中声明这个插件，然后你可以发送你的请求：

this.$api.$put(...)

方案二，在plugins/axios.js中声明axios为插件，并根据请求url设置监听器：

export default function({ $axios, redirect, app }) {
    const apiS3BaseUrl = // Your s3 base url here
    $axios.onRequest(config => {
        if (config.url.includes(apiS3BaseUrl) {
            setToken(false)
            // Or delete $axios.defaults.headers.common['Authorization']
        } else {
            // Your current axios config here
        }
    });
}

在 nuxt.config.js 中声明这个插件

我个人使用第一个解决方案，如果有一天 s3 url 改变并不重要。

这是文档

Answer 2

您可以将以下配置传递给nuxt-auth 。 请注意，这些plugins与根配置无关，但与nuxt-auth package 相关。

nuxt.config.js

auth: {
  redirect: {
    login: '/login',
    home: '/',
    logout: '/login',
    callback: false,
  },
  strategies: {
    ...
  },
  plugins: ['~/plugins/config-file-for-nuxt-auth.js'],
},

然后，创建一个插件文件，作为@nuxt/auth的配置（当然，你需要安装@nuxt/axios ：在这个文件中， exampleBaseUrlForAxios用作示例来设置 axios 调用的变量，而使用@nuxt/auth 。

config-file-for-nuxt-auth.js

export default ({ $axios, $config: { exampleBaseUrlForAxios } }) => {
  $axios.defaults.baseURL = exampleBaseUrlForAxios
  // I guess that any usual axios configuration can be done here
}

这是本文中解释的推荐的做事方式。 基本上，您可以在使用它时将运行时变量传递给您的项目。 因此，在这里我们传递了一个EXAMPLE_BASE_URL_FOR_AXIOS变量（位于.env中）并将其重命名为我们希望在项目中使用的名称。

nuxt.config.js

export default {
  publicRuntimeConfig: {
    exampleBaseUrlForAxios: process.env.EXAMPLE_BASE_URL_FOR_AXIOS,
  }
}