如何在 Nuxt 和 Axios 代理中添加默认参数？答案

【问题标题】：How to add default params in Nuxt and Axios proxy?如何在 Nuxt 和 Axios 代理中添加默认参数？
【发布时间】：2021-08-25 14:43:07
【问题描述】：

我正在尝试为我的代理添加默认初始参数。到目前为止，这是我的 nuxt 配置

axios: {
  proxy: true,
  params: {
    api_key_token: process.env.API_TOKEN,
  },
},

proxy: {
  '/api/': {
    target: process.env.API_URL,
    pathRewrite: { '^/api/': '' },
    logLevel: 'debug',
    // also tried adding params here
  },
},

我尝试的第一个解决方案是通过插件创建拦截器，但 API 密钥显示在网络选项卡中。我不希望它包含在客户端中。

import { Plugin } from '@nuxt/types';

const axiosPlugin: Plugin = ({ $axios }) => {
  $axios.onRequest((config) => {
    config.params = {
      ...config.params,
      api_key_token: 'I_DONT_WANT_THIS_BECAUSE_IT_CAN_BE_SEEN_IN_THE_CLIENT',
    };
  });
};

export default axiosPlugin;

我还尝试将 params 密钥从 axios 密钥移动到 proxy 并从外部 API 获得相同的返回（缺少 api_key_token）。

我得到的日志是正确的GET /api/user ~> https://external/api。这里唯一的问题是在 nuxt 配置内的 axios/proxy 选项对象中添加默认参数值的位置。

【问题讨论】：

不确定：什么时候会使用代理？在服务器上的构建期间或在某些客户端调用期间？

标签： vue.js axios nuxt.js

【解决方案1】：

搞定了。原来代理密钥配置中有一个onProxyReq 选项。

proxy: {
  '/api/': {
    target: process.env.API_URL,
    pathRewrite: { '^/api/': '' },
    logLevel: 'debug',
    onProxyReq: (proxyReq) => {
      proxyReq.path += '?api_key_token=' + process.env.API_TOKEN;
    },
  },
},

解决方案不是很好，但现在，它正在工作。

来源：https://github.com/chimurai/http-proxy-middleware/issues/184

【讨论】：

这对客户端仍然可见吗？
@Mulhoon 不可见。