special characters in querystring became space while invoking axios post

Question

My codes will send one Http-Post to backend server with one token which may contains one + sign.

  instance.post('/Handler.ashx', {
    email
  }, {
    params: {
      action: 'QueryUser',
      token: 'KALYh+KnLmH2vpn8ewOfQ3le3zmFr3Jo0jiIOID9fM1%2FCUBV1ULKc4Scq7Io0yA1'
    }
  })

But I found the backend received wrong token value. I checked the browser console, then found + is replaced with one space.

Below is the requests (POST and OPTIONS due to CORS, backend already set up allow-origin correctly):

Request URL: https://localhost:44323/Handler.ashx?action=QueryUser&token=KALYh+KnLmH2vpn8ewOfQ3le3zmFr3Jo0jiIOID9fM1%2FCUBV1ULKc4Scq7Io0yA1
Request Method: OPTIONS
Status Code: 200 
Remote Address: [::1]:44323
Referrer Policy: strict-origin-when-cross-origin
action: QueryUser
token: KALYh KnLmH2vpn8ewOfQ3le3zmFr3Jo0jiIOID9fM1/CUBV1ULKc4Scq7Io0yA1

Request URL: https://localhost:44323/Handler.ashx?action=QueryUser&token=KALYh+KnLmH2vpn8ewOfQ3le3zmFr3Jo0jiIOID9fM1%2FCUBV1ULKc4Scq7Io0yA1
Request Method: POST
Status Code: 500 
Remote Address: [::1]:44323
Referrer Policy: strict-origin-when-cross-origin
action: QueryUser
token: KALYh+KnLmH2vpn8ewOfQ3le3zmFr3Jo0jiIOID9fM1%2FCUBV1ULKc4Scq7Io0yA1

You will see the + is in querystring of the requested URL, but is replaced with the space in OPTIONS -> token which actually the backend received.

Anyone knows what is wrong? Appreciate it.

Below is the screenshot for browser->console.

score 1 · Accepted Answer · answered Aug 27 '21 at 21:57

1

As you already noticed, inside the query string the + is used to represent a space. You'd need to encode it as %2B.

answered Aug 27 '21 at 21:57

slauth

2,667
1
10
18

you may notice http-post has correct token value, and http-options not. and axios should encode the querystring value automatically. If I manually change it, axios will escape `%` and the backend will receive `%2B` instead of `+`. – Sphinx Aug 27 '21 at 22:06
@Sphinx then something else is double-encoding it. – Evert Aug 27 '21 at 23:24

score 0 · Answer 2 · answered Aug 27 '21 at 22:11

Not all characters in the URL params can be passed as is and some characters are automatically changed. For a more in deep explanation you can take a look in this wiki and a more detailed solution can be found in this other question.

instance.post('/Handler.ashx', {
    email
  }, {
    params: {
      action: 'QueryUser',
      token: encodeURIComponent('KALYh+KnLmH2vpn8ewOfQ3le3zmFr3Jo0jiIOID9fM1%2FCUBV1ULKc4Scq7Io0yA1')
    }
  })

special characters in querystring became space while invoking axios post

2 Answers2