[Vuejs]-Frontend:8080 submitting to Backend:80 breaks when I change Axios param

by

0👍

I found a workaround in a github discussion, that keeps things pretty simple and processes data. I’m still interested to know what the problem is here and how I can fix it.

import { createApp } from 'vue'
import App from './App.vue'

import router from './router'

import axios from 'axios'
import VueAxios from 'vue-axios'

axios.interceptors.request.use((config) => {
    if (config.headers['Content-Type'] && config.headers['Content-Type'] === 'application/x-www-form-urlencoded') {
      config.transformRequest = (data) => {
        const str = [];
        Object.keys(data).forEach(key => str.push(`${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`));
        return str.join('&');
      };
    }

    return config;
  }, error => Promise.reject(error));

My call to this.$http now looks like this, adding the content-type.

    this.$http({
        method: 'post',
        url: e.target.action,
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        data: {...}
      })

0👍

Seems like the proxy is behaving correctly

the params option sends the data as query params, which is why you’d see them in the url. If you’re using POST method, data is usually what you’d use with it, since it sends it as a payload. This also assumes that you’re sending json payload, and you may be expecting a form response, which would be handled differently.. But it’s hard to tell what your php API is expecting.

Leave a comment