如何防止axios对我的请求参数进行编码？

Question

我尝试通过 GET 请求中的 URL 参数传入 API 密钥。

但是，我注意到 Axios 在发送请求时对我的 API 密钥中的字符进行了编码。这会导致 API 拒绝我的请求，因为它无法识别我的密钥。

如何防止 Axios 对我的 GET 参数进行编码？

Answer 1

您可以使用自定义参数序列化器，如下所示：

axios.get('https://foobar.com/api', {
  paramsSerializer: function(params) {
    var result = '';
    // Build the query string 
    return result;
  }
});

paramsSerializer

可以在实例级别设置：

var instance = axios.create({ paramsSerializer: function(params) { /* ... */ } })

或在全球层面：

axios.defaults.paramsSerializer = function(params) { /* ... */ };

另一种选择是直接将 api 密钥添加到 URL：

axios.get('https://foobar.com/api?api_key=' + key);

您可以使用“params”配置选项添加其他参数：

axios.get('https://foobar.com/api?api_key=' + key, {
  params: {
    foo: 'bar'
  }
});

Answer 2

如果您使用qs库（或类似的编码库），您也可以这样做

import qs from 'qs';

axios.get('https://foobar.com/api', {
    params,
    paramsSerializer: (params) => qs.stringify(params, { encode: false }),
});

Answer 3

正如 marko424 回答的那样，您也可以在 axios create 上全局执行此操作：

import qs from 'qs'

const axios = axios.create({
    paramsSerializer: params => qs.stringify(params, { encode: false }),

})

这避免了您需要在每次 axios 调用中重复代码。