阻止nuxt auth将授权标头发送到外部url

Question

我想在使用nuxtauth模块的nuxtprojekt中使用axios向外部API发送POST请求。

当用户通过身份验证时，axios似乎会自动添加一个授权头(这很好，通常需要调用我的后端API(。然而，当对外部API进行调用时，头可能不被接受，并导致调用失败。

是否有任何方法可以指定应该为哪些URL添加或排除auth标头？

以下是我的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' },
},
},
},
}

更多背景：在我的特定用例中，我想将文件上传到AmazonS3存储桶，所以我创建了一个预先签名的上传请求，然后想将文件直接上传到存储桶中。只要用户没有经过身份验证，这就可以很好地工作。

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标头：

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

这似乎阻止了添加所有与formData相关的标头。此外，通过headers属性或transformRequest函数在配置中设置任何头都不起作用，这再次导致对外部API的调用明显失败(请求将在没有这些特定头的情况下发送(。

当我使用nuxt-axios模块时，我不知道如何向这里或这里描述的axios实例添加拦截器。

任何关于在哪里寻求帮助的帮助或提示都将不胜感激：(

Answer 1

尝试以下

在插件文件夹中创建一个新的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(...)

Answer 2

您可以将以下配置传递给nuxt-auth。注意，那些plugins与根配置无关，而是与nuxt-auth包有关。

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。PS：在此文件中，以exampleBaseUrlForAxios为例，在使用@nuxt/auth时设置axios调用的变量。

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,
}
}