title: axios parameter encoding in vue.js
body: <p>I am using vue.js with axios to fetch data from an API endpoint.</p>
  <p>The url I need is something like this:</p>
  <pre><code>https://base_url.com?f=json&amp;where=&amp;returnGeometry=false&amp;spatialRel=esriSpatialRelIntersects&amp;geometry={&quot;rings&quot;:[[[346564.4406999983,6675729.9070999995],[346507.04410000145,6675711.315700002],[346501.2646000013,6675723.884199999],[346495.0234000012,6675737.456500001],[346555.5135000013,6675757.049900003],[346555.91690000147,6675757.180699997],[346555.92969999835,6675757.141800001],[346557.9803000018,6675750.865099996],[346559.90100000054,6675744.985399999],[346560.7393000014,6675742.419500001],[346564.2879999988,6675731.5568],[346564.4406999983,6675729.9070999995]]],&quot;spatialReference&quot;:{&quot;wkid&quot;:102100,&quot;latestWkid&quot;:3857}}&amp;geometryType=esriGeometryPolygon&amp;inSR=102100&amp;outFields=*&amp;outSR=102100
  </code></pre>
  <p>But somehow, axios turns the params into something like this:</p>
  <pre><code>?f=json&amp;where=&amp;returnGeometry=false&amp;spatialRel=esriSpatialRelIntersects
  &amp;geometry=%257B%2522rings%2522%253A%255B%255B%255B346564.4406999983%252C6675729.9070999995%255D%252C%255B346507.04410000145%252C6675711.315700002%255D%252C%255B346501.2646000013%252C6675723.884199999%255D%252C%255B346495.0234000012%252C6675737.456500001%255D%252C%255B346555.5135000013%252C6675757.049900003%255D%252C%255B346555.91690000147%252C6675757.180699997%255D%252C%255B346555.92969999835%252C6675757.141800001%255D%252C%255B346557.9803000018%252C6675750.865099996%255D%252C%255B346559.90100000054%252C6675744.985399999%255D%252C%255B346560.7393000014%252C6675742.419500001%255D%252C%255B346564.2879999988%252C6675731.5568%255D%252C%255B346564.4406999983%252C6675729.9070999995%255D%255D%255D%252C%2522spatialReference%2522%253A%257B%2522wkid%2522%253A102100%252C%2522latestWkid%2522%253A3857%257D%257D&amp;geometryType=esriGeometryPolygon&amp;inSR=102100&amp;outFields=*&amp;outSR=102100
  </code></pre>
  <p>The endpoint however expects the params to be like this:</p>
  <pre><code>f=json&amp;where=&amp;returnGeometry=false&amp;spatialRel=esriSpatialRelIntersects&amp;geometry=%7B%22rings%22%3A%5B%5B%5B346564.4406999983%2C6675729.9070999995%5D%2C%5B346507.04410000145%2C6675711.315700002%5D%2C%5B346501.2646000013%2C6675723.884199999%5D%2C%5B346495.0234000012%2C6675737.456500001%5D%2C%5B346555.5135000013%2C6675757.049900003%5D%2C%5B346555.91690000147%2C6675757.180699997%5D%2C%5B346555.92969999835%2C6675757.141800001%5D%2C%5B346557.9803000018%2C6675750.865099996%5D%2C%5B346559.90100000054%2C6675744.985399999%5D%2C%5B346560.7393000014%2C6675742.419500001%5D%2C%5B346564.2879999988%2C6675731.5568%5D%2C%5B346564.4406999983%2C6675729.9070999995%5D%5D%5D%2C%22spatialReference%22%3A%7B%22wkid%22%3A102100%2C%22latestWkid%22%3A3857%7D%7D
  </code></pre>
  <p>It looks as if the encoding for the geometry parameter is wrong or something else than what the api expects.</p>
  <p>This is my code:</p>
  <pre><code>return axios
              .get(process.env.VUE_APP_WATERINFO_RISK_URL, {
                  params: {
                      f: 'json',
                      where: '',
                      returnGeometry: false,
                      spatialRel: 'esriSpatialRelIntersects',
                      geometry:
                      {
                          &quot;rings&quot;: [[[346564.4406999983, 6675729.9070999995], [346507.04410000145, 6675711.315700002], [346501.2646000013, 6675723.884199999], [346495.0234000012, 6675737.456500001], [346555.5135000013, 6675757.049900003], [346555.91690000147, 6675757.180699997], [346555.92969999835, 6675757.141800001], [346557.9803000018, 6675750.865099996], [346559.90100000054, 6675744.985399999], [346560.7393000014, 6675742.419500001], [346564.2879999988, 6675731.5568], [346564.4406999983, 6675729.9070999995]]],
                          &quot;spatialReference&quot;: { &quot;wkid&quot;: 102100, &quot;latestWkid&quot;: 3857 }
                      }
                      ,
                      geometryType: 'esriGeometryPolygon',
                      inSR: '102100',
                      outFields: '*',
                      outSR: '102100',
                      callback: ''
                  }
              })
              .then(
                  response =&gt; {
                      console.log(response);
  
                  })
              .catch(error =&gt; {
                  console.log(error);
              });
  </code></pre>
  <p>What should I do to get my data/url in the right format for the endpoint?</p>
  <p>Many thanks in advance :)</p>