Axios.get returns 状态代码 400 无法找出问题所在（SODA api）

Question

无法确定我的 axios 调用有什么问题。任何帮助将不胜感激。

所以我有一个搜索栏 onClick，它将搜索词发送到编译 Api 查询字符串的函数。

const SearchForm = () => {
  const [searchTerm, setSearchTerm] = useState({
    searchTerm : "",
    boro: ""
  });

  const handleChange = e => {
    const { value, name }  = e.target;    
    setSearchTerm((e)=>{
      return {
        ...searchTerm,
        [name] : value
      }
    });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    debugger
    const res = await SodaApi.searchResta(searchTerm.searchTerm, searchTerm.boro);
    console.log(res)
    setSearchTerm("");
  }

  return (
    <form className="SearchForm" onSubmit={handleSubmit}>

        <label htmlFor="searchBar">Restaurant Name:</label>
        <input type="text"
              id="searchBar"
              name="searchTerm"
              placeholder="Enter Restaurant Name"
              value={searchTerm.searchTerm}
              onChange={handleChange}       
        />        

        <label htmlFor="boro">Borough: <span>*</span></label>
        <select id="boro" 
                name="boro"
                value={searchTerm.boro}
                onChange={handleChange}
                required
        > 
          <option value="" defaultValue disabled hidden>Select a Boro</option>
          <option value="Brooklyn">Brooklyn</option>
          <option value="Manhattan">Manhattan</option>
          <option value="Staten Island">Staten Island</option>
          <option value="Bronx">Bronx</option>
          <option value="Queens">Queens</option>
        </select>        
   
        <button className="SearchFormButton" type="submit">Search</button>      
    </form>
  )
}

export default SearchForm;

这里是编译函数

class SodaApi {
  static token;

  static async searchResta (searchTerm, boro) {
    const headerOptions = {
      headers : {
        'X-App-Token' : `${config.MY_APP_TOKEN}`
      }
    };

    const queryOptions = `$query=SELECT camis,dba,boro,building,street,zipcode,phone,cuisine_description,inspection_date,action,violation_code,violation_description,critical_flag,score,grade,grade_date,record_date,inspection_type,latitude,longitude WHERE dba like '%${searchTerm.toUpperCase()}%' AND boro = '${boro}'`;
    const sodaApiQueryString = config.NYC_RESTA_API_URL + queryOptions;
    const results = await axios.get( sodaApiQueryString, headerOptions);
    const cleanedResults = consolidate(results);


    return cleanedResults
  };

这是我返回的示例查询字符串。我打电话给汽水 Api。

https://data.cityofnewyork.us/resource/43nn-pn8j.json?$query=SELECT%20camis,dba,boro,building,street,zipcode,phone,cuisine_description,inspection_date,action,violation_code,violation_description,critical_flag,score,grade,grade_date,record_date,inspection_type,latitude,longitude%20WHERE%20dba%20like%20%27%STAR%%27%20AND%20boro%20=%20%27Brooklyn%27

我返回的错误是这个

GET https://data.cityofnewyork.us/resource/43nn-pn8j.json?$query=SELECT%20camis,dba,boro,building,street,zipcode,phone,cuisine_description,inspection_date,action,violation_code,violation_description,critical_flag,score,grade,grade_date,record_date,inspection_type,latitude,longitude%20WHERE%20dba%20like%20%27%STAR%%27%20AND%20boro%20=%20%27Brooklyn%27 400 (Bad Request)


Uncaught (in promise) Error: Request failed with status code 400
    at createError (createError.js:16)
    at settle (settle.js:17)
    at XMLHttpRequest.handleLoad (xhr.js:62)

我没有得到的是，如果我在 INSOMNIA 中发送相同的查询字符串，我会得到状态代码 200，并且会得到我想要的数据。但是怎么会当我用搜索栏发送它时，我收到了 400 错误。我尝试取出我的 header 令牌，我尝试使用不同的查询进行搜索。我的应用程序再次无法运行，但如果我使用相同的查询字符串，我会从我的 chrome 控制台返回并使用 INSOMNIA 发送它。

怎么会？？

Answer 1

查询字符串中的 % 个字符未正确编码。它们应该被编码为 %25。参见 https://developers.google.com/maps/documentation/urls/url-encoding

使用 Axios 确保这一点的最简单方法是使用 params 配置。那里的任何键/值都将被 URL 编码。

const options = {
  headers : {
    'X-App-Token': config.MY_APP_TOKEN
  },
  params: {
    "$query": `SELECT camis,dba,boro,building,street,zipcode,phone,cuisine_description,inspection_date,action,violation_code,violation_description,critical_flag,score,grade,grade_date,record_date,inspection_type,latitude,longitude WHERE dba like '%${searchTerm.toUpperCase()}%' AND boro = '${boro}'`
  }
};

const results = await axios.get(config.NYC_RESTA_API_URL, options);

Axios.get returns 状态代码 400 无法找出问题所在（SODA api）

Axios.get returns status code 400 cant figure out whats wrong (SODAapi)

javascript

reactjs

axios

get

soda