vue+axios+qs 发送ajax请求 axios响应中文乱码 axios发送post请求400错误

准备：

1.引入vue.js

2.引入axios.js

3.引入qs.js

这三个js文件都可以通过npm安装到本地然后引入html文件中

<div id="app">
    {{message}}
    <button @click="sayHello">hhh</button>
</div>
<script>
    const {createApp} = Vue
    const qs=Qs

    createApp({
        data() {
            return {
                message: 123
            }
        },
        methods: {
            sayHello() {
                axios({
                    url: "",
                    method: 'POST',
                    headers: {'content-type': 'application/x-www-form-urlencoded;charset=UTF-8'},
                    data: qs.stringify({"roleid": 3, "rolename": "HR", "state": 0, "memo": "人事专员"}),
                    responseEncoding: 'utf8'
                }).then((res) => {
                    alert(res.data.code+":"+res.data.msg);
                })
            }
        }
    }).mount("#app")

 

 

当前情况下axios响应返回的json中中文是????这个没有办法在前端解决，在后端解决需要通过配置HttpMessageConvert将字符编码改为UTF-8，

这里我使用的是Gson 同样的也可以使用jackson 同样的配置 可以通过

在IDEA中搜索AbstractJsonHttpMessageConverter类的子类查询

<!--配置mvc的注解驱动-->
    <mvc:annotation-driven>
        <mvc:message-converters>
            <bean class="org.springframework.http.converter.StringHttpMessageConverter">
                <constructor-arg value="UTF-8"/>
            </bean>
            <bean class="org.springframework.http.converter.json.GsonHttpMessageConverter">
                <property name="defaultCharset" value="UTF-8"/>
            </bean>
        </mvc:message-converters>
    </mvc:annotation-driven>