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

nnsrf1az 于 2023-05-28 发布在 iOS

关注(0)|答案(2)|浏览(149)

我想在nuxt项目中使用nuxtauth模块，通过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' },
        },
      },
    },
  }

更多背景：在我的特定用例中，我想将文件上传到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头：

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

这似乎会阻止添加所有与formData相关的头。此外，通过headers属性或transformRequest函数在配置中设置任何头都不起作用，这再次导致对外部API的调用明显失败（请求将在没有任何这些特定头的情况下发送）。
由于我正在使用nuxt axios模块，我不确定如何向axios示例添加拦截器，如here或here所述。
任何帮助或提示在哪里找到帮助是非常感谢：）

axios

来源：https://stackoverflow.com/questions/67384762/prevent-nuxt-auth-to-send-authorization-header-to-external-url

2条答案

按热度按时间

igetnqfo1#

尝试以下操作

在您的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(...)

赞(0）回复(0）举报 2023-05-28

ubbxdtey2#

您可以将以下配置传递给nuxt-auth。请注意，那些plugins与root配置无关，但与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
}

这是推荐的方法，如article中所解释的。基本上，当你使用它时，你可以将运行时变量传递给你的项目。因此，这里我们传递一个EXAMPLE_BASE_URL_FOR_AXIOS变量（位于.env中），并将其重命名为我们希望在项目中使用的名称。
nuxt.config.js

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

赞(0）回复(0）举报 2023-05-28

我来回答

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

2条答案

相关问题

热门标签

最新问答