阻止 Nuxt Auth 将授权标头发送到外部 URL
阻止 Nuxt Auth 将授权标头发送到外部 URL
我想在使用nuxt的项目中，通过axios向外部API发送POST请求，在这个项目中我使用了nuxt的auth模块。
当用户经过身份验证后，axios似乎会自动添加授权头部（这对于调用我的后端API来说是可以的，通常是必需的）。然而，当调用外部API时，可能不会接受这个头部，从而导致调用失败。
有没有办法指定哪些URL应该添加或排除授权头部？
下面是我在nuxt.config中的auth和axios模块的配置：
// Axios模块配置
axios: {
baseURL: '//localhost:5000',
},
// Auth模块配置
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)
我尝试通过请求配置取消授权头部：
const config = {
transformRequest: (data, headers) => {
delete headers.common.Authorization
}
}
await this.$axios.post(url, formData, config)
这似乎会阻止添加所有与formData相关的头部。而通过headers属性或transformRequest函数在配置中设置任何头部也不起作用，这显然会导致对外部API的调用失败（请求将被发送时不包含任何这些特定的头部）。
由于我使用的是nuxt axios模块，我不确定如何像这里或这里所描述的那样向axios实例添加拦截器。
非常感谢任何帮助或提示在哪里寻求帮助 🙂
问题的原因是，在使用nuxt auth发送请求到外部URL时，会自动带上授权头部信息，这可能会导致请求失败。解决方法是创建一个新的axios实例，并在该实例中设置不需要的授权头部信息。
首先，在plugins文件夹中创建一个新的axios实例，并设置需要的头部信息。代码如下：
export default function ({ $axios }, inject) {
// 创建一个自定义的axios实例
const api = $axios.create({
headers: {
// 需要的头部信息
}
})
// 将该实例注入到上下文中，命名为$api
inject('api', api)
}
然后，在nuxt.config.js中声明该插件，这样就可以发送请求了。代码如下：
plugins: [
'~/plugins/api.js'
]
最后，在发送请求时，使用新创建的axios实例即可。代码如下：
this.$api.$put(...)
以上是解决问题的方法。其中第一种方法非常有效，而第二种方法无法解决问题。
问题的出现原因：在使用nuxt-auth时，希望禁止向外部URL发送授权头，但是配置文件中的plugins配置与根配置无关，而是与nuxt-auth包相关。
解决方法：可以通过在nuxt.config.js中传递以下配置来解决：
auth: {
redirect: {
login: '/login',
home: '/',
logout: '/login',
callback: false,
},
strategies: {
...
},
plugins: ['~/plugins/config-file-for-nuxt-auth.js'],
},
然后，创建一个插件文件作为/auth的配置文件（当然需要安装/axios）。
在这个文件中，exampleBaseUrlForAxios是一个示例，用于在使用/auth时设置axios调用的变量。
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文件中），并将其重命名为我们希望在项目中使用的名称。
export default {
publicRuntimeConfig: {
exampleBaseUrlForAxios: process.env.EXAMPLE_BASE_URL_FOR_AXIOS,
}
}
感谢您的回答。不幸的是，我不明白为什么要使用nuxt-axios插件以及它的作用-对我来说，baseUrlIam在这里是undefined。但这可能与您的nuxt-auth.js有关-我没有使用自定义的nuxt-auth插件。这到底是做什么的？为什么要使用它？它如何影响我的nuxt.config.js中的auth配置？
我修改了回答，希望更清楚了。