Am I doing something wrong with axios?



  • Hi

    I’m trying to post something to my server:

    axios.post("api", { API: 1, version: "0.1b"...}, { headers: {'Content-Type': 'application/json'}})
    

    I tried with and without the headers part and when checking the server side (Java/rest), both API and version parameters are null.

    When sending the info as the 3rd parameter, ie

    axios.post("api", null, { params: {API: 1, version: "0.1b"...}})
    

    The server receives it as expected, am I missing something?
    Thanks



  • Did you create the axios instance? If not, I believe it looks for the config, which is the 3rd argument. Not sure why the data argument isn’t working. At any rate, if you didn’t already, create the axios instance and use that and see what happens.

    And if you are using Quasar, have a read. 🙂

    https://medium.com/quasar-framework/adding-axios-to-quasar-dbe094863728

    Scott



  • I never created axios and everywhere I read that the params should be the second parameter but when I did, I got CORS. I fixed the CORS and apparently I still have a problem and I need to use the 3rd parameter anyway… I got confused at this point 🙂

    Nevertheless, when sending an array
    var info = [{name: “test”, age: 40},{name: “tester”, age: 50}]
    axios.post(this.serverUrl, null, {params: {dataToSend: info},paramsSerializer: params => { return qs.stringify(params)}
    I got CORS, I’d expect that if CORS was my problem, I’d get it also for a simple send
    axios.post(this.serverUrl, null, {params: {name: “test”}}
    But I’m not getting a CORS with this… That made me even more confused 😃



  • Was CORS your original problem and not just an error? Because CORS isn’t an error, it’s an incorrect condition. 🙂 Are we also talking about the dev server?

    Scott



  • I will start from the beginning in order not to get lost 🙂

    The bottom line is: I want to send params to my server including an array, for example:
    {params: { version: “0.1b”, command: “test”, example: [{name: “blah” age: 50, name: “blah2”, age: 30}]}
    When sending params as the 2nd parameter of axios (with/without the array) - I got CORS.
    When sending params as the 3rd parameter, it worked OK but without the array. Once I added the array, I got CORS, even when I used qs as paramsSerializer but maybe I used it wrong.

    I want to do it using devserver for testing (localhost:8080 -> myrealdomain:8443:/suffix1/suffix2)
    How can this be done?



  • This is working fine with no problem

    devServer: {
         https: false,
         open: true, // opens browser window automatically
         port:8080,
    }
    

    and

    axios.post(this.serverUrl*, null, { params: {version: "0.1b", command: "login", email: this.regEmail, password: this.password}})
    

    this.serverUrl = https://myrealdomain.com:8443/suffix1/suffix2

    Now I want to add an array parameter

    var info = [{name: “test”, age: 40},{name: “tester”, age: 50}]
    axios.post(this.serverUrl*, null, { params: {version: "0.1b", command: "login", email: this.regEmail, password: this.password, example: info}})
    

    At this point, no matter what I do, including using paramsSerializer qs and another parsing function

    axios.post(this.serverUrl, null, {params: {dataToSend: info},paramsSerializer: params => { return qs.stringify(params)}
    
    parseParams(params) {
          const keys = Object.keys(params);
          let options = '';
          keys.forEach((key) => {
            const isParamTypeObject = typeof params[key] === 'object';
            const isParamTypeArray = isParamTypeObject && (params[key].length >= 0);
            if (!isParamTypeObject) {
              options += `${key}=${params[key]}&`;
            }
            if (isParamTypeObject && isParamTypeArray) {      
              params[key].forEach((element) => {
                options += `${key}=${element}&`;
              });
            }      
          });
          return options ? options.slice(0, -1) : options;
        },
    

    I get CORS (I remind you I don’t get CORS now).
    Is that mean that specifically for array parameter I do need to “fix” the CORS (devserver) or maybe it just means I’m doing something wrong with how I parse/send it?



  • I’ve never done this myself, but you can set up webpacks devserver with a proxy with the devServer property in quasar.config.js.

    https://webpack.js.org/configuration/dev-server/#devserverproxy

    I believe that should help with anything CORS. Then try creating your instance and using that to make your post call.

    Scott



  • OK, as I thought, the problem was not CORS. The following is working as expected

    axios.post(this.serverUrl, null, {data: {version: "0.1b", command: "test", data: JSON.stringify(this.user.info)}, transformRequest: [(data, headers) => {return qs.stringify(data);}], headers: { 'Content-Type': 'application/x-www-form-urlencoded' }}
    

    this.user.info = [{name: “blah”, age: 30}, {name: “blah2”, age: 50}]


Log in to reply