带有空格的 Axios GET 请求参数 [英] Axios GET Request Param with Whitespace

问题描述

目标

我想使用 axios 为 GET 请求传递查询参数.参数值是一个字符串类型的变量，有空格.

问题

似乎 axios 正在以我的后端无法理解的格式对参数进行编码.我对 axios 编码进行了研究，看起来 axios 将空格编码为 + 而不是 %20.

示例

假设您有此请求:

 const whitespace = "white space";const encodeWhitespace = encodeURI(whitespace);const noSpace =否"；axios.get('/api', {参数:{'foo': '酒吧','bar': '你好世界','空格':空格，'encode': 'hello%20world','编码':encodeWhitespace，'简单':noSpace}}

参数 foo、bar、encode、simple 都可以工作并使用正确的数据生成响应.params space, encoding 不会生成正确的数据.请求成功，返回 200，但没有返回任何数据.

我使用相同的查询在 Postman 中创建了相同的请求，以查看 GET 是否返回预期结果，并且确实如此.我在 Postman 中添加了 %20 并且它返回得很好.我在 Postman 中添加了 + 并返回了预期的结果.

问题

变量实现可能有什么问题?如果没有像 bar 参数这样的变量，我就无法做到这一点，因为该值正在传递给一个函数(Redux 操作).对此的任何想法或想法都会有所帮助.如果需要更多信息，请发表评论.

解决方案

看起来像这样 一个Axios 库的问题(或默认参数序列化行为).

所以要克服这个问题，您有两个选择.

1. 在 URL 本身中定义您的查询参数

const whitespace = 空白"；axios.get(`/api?space=${whitespace}`);

2. 编写您自己的 paramsSerializer 以构建查询字符串.

const whitespace = 空白"；const encodeWhitespace = encodeURI(whitespace);const noSpace =否"；axios.get('/api', {参数:{'foo': '酒吧','bar': '你好世界','空格':空格，'简单':noSpace},paramsSerializer: (params) =>{//查询字符串构建的示例实现让结果 = '';Object.keys(params).forEach(key => {结果 += `${key}=${encodeURIComponent(params[key])}&`;});返回 result.substring(0, result.length - 1);}});

<块引用>

注意:上面的paramsSerializer也可以定义在全局级别或Axios实例级别.

• 全球层面

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

• 实例级别

let axInstance = axios.create({ paramsSerializer: (params) => {/* ... */} })

Goal

I want to pass query params for a GET request using axios. The param value is a variable of type string and has whitespace.

Problem

It seems axios is encoding the param in a format that my backend does not understand. I have done research on axios encoding and it appears axios encodes whitespace to a + and not %20.

Example

Let's say you have this request:

 const whitespace = "white space";
 const encodeWhitespace = encodeURI(whitespace);
 const noSpace = "no";

 axios.get('/api', {
   params: {
     'foo': 'bar',
     'bar': 'hello world',
     'space': whitespace,
     'encode': 'hello%20world', 
     'encoded': encodeWhitespace,
     'simple': noSpace
   }
}

The params foo, bar, encode, simple all work and generate a response with the correct data. The params space, encoded do not generate the correct data. The request is successful with 200 but returns no data.

I created the same request in Postman with the same queries to see if the GET returns the expected result and it does. I added the %20 in Postman and it returns just fine. I added the + in Postman and that returns the expected result as well.

Question

What might be going wrong with the variable implementation? I can't do it without the variable like the bar param because the value is being passed to a function (Redux action). Any ideas or thoughts on this would be helpful. Please comment if more information is needed.

解决方案

Seems like this is an issue (or the default parameter serialization behavior) of Axios library.

So to overcome this, you have 2 options.

1. Define your query params in the URL itself

const whitespace = "white space";
axios.get(`/api?space=${whitespace}`);

2. Write your own paramsSerializer to build the query string.

const whitespace = "white space";
const encodeWhitespace = encodeURI(whitespace);
const noSpace = "no";

axios.get('/api', {
    params: {
        'foo': 'bar',
        'bar': 'hello world',
        'space': whitespace,
        'simple': noSpace
    },
    paramsSerializer: (params) => {
        // Sample implementation of query string building
        let result = '';
        Object.keys(params).forEach(key => {
            result += `${key}=${encodeURIComponent(params[key])}&`;
        });
        return result.substring(0, result.length - 1);
    }
});

Note: The above paramsSerializer can be defined in the global level or Axios instance level as well.

• Global level

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

• Instance level

let axInstance = axios.create({ paramsSerializer: (params) => { /* ... */ } })

这篇关于带有空格的 Axios GET 请求参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！