Parameter problems and Cross-domain problems of using Axios for POST data in Vue

I defined a mock login request in a component of Vue. I defined the login user name and password in userinfo under data in advance.

the following is a defined code snippet:
import axios from "axios"
export default {
    name:"MainViews",
    data () {
        return {
            userinfo:{
                username:"admin",
                password:"wt_adam110"
            }
        }
    },
    created () {
        this._getuser ()
    },
    methods: {
        _getuser () {
            axios({
                method: "post",
                url: "/apis/jxue/a/login",
                data: postData,
                headers: {
                    "Content-Type":"application/x-www-form-urlencoded"
                }
            }).then((res)=>{
                console.log(res);
            })
        }
    }
}
after completing the above simulation, type the result to me on the console:

clipboard.png

:

POSTQs.stringfy()

npm install qs --save
import qs from "qs" :


:

clipboard.png

in config/index.js, I have done cross-domain processing. The server I interface to is on another machine in my local area network.)
proxyTable: {
      "/apis": {
        target: "http://192.168.31.177:8080", // 
        // secure: true,  // https
        changeOrigin: true, // 
        pathRewrite: {
          "^/apis": "" // 
        }
      }
    }

this is the whole situation. I have two questions:

  1. Why can"t my POST data return normal data? is there something wrong with the data when I request it? How to solve it?
  2. Why do I have cross-domain problems after I change the format of the POST parameter?
Mar.23,2021

  1. problems with data errors. The data error is due to the difference between the post method of axios and the parameters taken by jQuery in the HTTP request, which causes some servers to report errors if they fail to parse the parameters in your request.
  2. qs is not used in data, the correct method should be
axios({
    url: yourUrl,
    data:data,
    method: 'POST',
    transformRequest:[function(data){
        return qs.stringify(data)
    }]
})

1. You add 'Content-Type':'application/x-www-form-urlencoded' to header indicating that the data type you submitted is in form format, but when you submit it for the first time, it is the format of an object
2. The general submission format json format is converted with JSON.stringify (data), which you need to confirm with the backend
3. The cross-domain problem may be that your proxytable does not work. Take a look at the full address of the interface accessed in your browser

Menu