Am I doing something wrong with axios?

amoss

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

s.molinari

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

amoss

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

s.molinari

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

amoss

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?

amoss

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?

s.molinari

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

amoss

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}]

No More Posting New Topics!

Am I doing something wrong with axios?