关于Axios跨域访问后端,后端出现“Required String parameter ‘xxx‘ is not present“

本文主要介绍了在使用Axios进行跨域访问后端时遇到的'Required String parameter ‘xxx‘ is not present'错误。问题源于前端与后端参数传递格式不匹配。分析了前端Vue组件和后端Controller的代码,确认拼写无误。解决方案包括配置axios的请求头,使用QS库进行序列化,以及探讨URLSearchParams的使用。最后,提供了详细的代码示例和配置方法。
摘要由CSDN通过智能技术生成

项目背景:

最近有空学习一下前端的新东西,关于Axios跨域请求方面,由于之前是专职做后端的,随便找了个前端项目改造一下,一方面是向着全栈方面,挑战一下自己.另一方面也是现在社区支持的比较好了,学习起来很方便.

关于前端向后端发起跨域请求的方面,各位同学可以参考网上资料,比如利用Nginx做反向代理…
(但是在这个demo项目里暂时没有应用).废话不多说了.
这是二次封装axios请求 命名 axios2.(是修改过后的正确代码,具体请看问题描述)

/**=================================================================================**/
/**
 *
 * post方法,一次请求,提交方式Form-Data,如果想传过去的参数是字符串就是这用形式
 * {headers} 为 {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'}
 * @param {String} url [请求的url地址]
 * @param {Object} data [请求时携带的参数]
 *
 * 原请求参数格式为    key1=val1&key2=val2&key3=
 * 解析之的格式后为    key1: val1
     key2: val2
     key3:
 */
export function postFormJSON(url, data) {
   
    return new Promise((resolve, reject) => {
   
        axios2.post(url, QS.stringify(data), {
    headers: {
    'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' } })
            .then(res => {
   
                resolve(res.data);
            })
            .catch(err => {
   
                reject(err.data);
            });
    });
}

/**
 * !!!!!!慎用!!!!!!
 *
 * post方法,请求一次,表单提交方式Form-Data
 * {headers} 为 {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'}
 * @param {String} url [请求的url地址]
 * @param {Object} data [请求时携带的参数]
 *
 * 原请求参数格式为     <b>{"key1":"val1","key2":"val2","key3":"val3"}</b>
 * 解析之的格式后为     {"key1":"val1","key2":"val2","key3":"val3"}:
 */

export function postFormObject(url, data) {
   
    return new Promise((resolve, reject) => {
   
        axios2.post(url, QS.parse(data), {
    headers: {
    'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' } })
            .then(res => {
   
                resolve(res.data);
            })
            .catch(err => {
   
                reject(err.data);
            });
    });
}

/**
 * post方法,请求两次,如果想传过去的参数是字符串就是这用形式
 * 默认的{Content-Type:application/json;charset=UTF-8}
 * @param url
 * @param params
 * @returns {Promise<unknown>}
 *  参数格式: 与 postJSON 相同
 *  postJSON() 与 postFormJSON() 等效
 */
export function postJSON(url, data) {
   
    return new Promise((resolve, reject) => {
   
        axios2.post(url, QS.stringify(data))
            .then(res => {
   
                resolve(res.data);
            })
            .catch(err => {
   
                reject(err.data);
            });
    });
}

/**
 * post方法,请求两次,如果想传过去的参数是对象就是这用形式
 * 默认的{Content-Type:application/json;charset=UTF-8}
 * @param url
 * @param params
 * @returns {Promise<unknown>}
 *
 * 原请求参数格式为    {"key1":"val1","key2":"val2","key3":"val3"}
 * 解析之的格式后为    key1: val1
                    key2: val2

 */
export function postObject(url, data) {
   
    return new 
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值