React中Axios Post请求遇403错误及无效CORS请求问题

以下是排查和解决的核心要点：

• 移除无效请求头
  你在请求头中添加的"Access-Control-Allow-Origin":"*"属于服务器响应头，前端请求时添加该字段完全无效，还可能触发服务器的非法请求校验，直接删除这一行即可。

• 修正Content-Type与数据格式的匹配
  你设置的content-type为application/x-www-form-urlencoded;charset=UTF-8，但传入的data是JSON对象。Axios默认会将JSON对象序列化为application/json格式的请求体，这与你声明的Content-Type不匹配，是导致403的常见原因。
  解决方式二选一：

  1. 若服务器要求x-www-form-urlencoded格式，使用qs库将数据转为URL编码格式（先执行npm install qs安装依赖）：

     import qs from 'qs';
     
     export const searchByChassis = (chassis: string, seq?: string, customNo?: string) => async dispatch => {
       return await axios({
         method: 'post',
         url: '/api/sticker/details',
         headers: {
           'content-type': 'application/x-www-form-urlencoded;charset=UTF-8',
           'x-clientId': xClientId
         },
         data: qs.stringify({
           chassis: chassis,
           seq: seq ? seq : "NULL",
           customNo: customNo ? customNo : "NULL"
         })
       })
       .then(response => JSON.stringify(response))
       .catch(error => console.log(error));
     };
     

  2. 若服务器支持application/json格式，直接修改Content-Type为application/json，保留原有data结构即可：

     headers: {
       'content-type': 'application/json;charset=UTF-8',
       'x-clientId': xClientId
     },
     

• 校验x-clientId的有效性
  确认xClientId变量是否已正确赋值，Postman中你手动填写了合法的clientId，但React代码中该变量可能存在未定义、值为空或与Postman不一致的情况，直接导致服务器权限校验失败。可通过console.log(xClientId)在浏览器控制台确认值的正确性。

• 处理凭证传递问题
  如果请求需要携带登录凭证（如Cookie），Postman会自动保存并发送，但Axios默认不会在跨域请求中携带凭证。若为跨域场景，需在Axios配置中添加withCredentials: true：

  axios({
    method: 'post',
    url: '/api/sticker/details',
    withCredentials: true, // 开启凭证携带
    // ...其他配置
  })
  

  注意：此时服务器端也需配置Access-Control-Allow-Credentials: true才能生效。

内容的提问来源于stack exchange，提问作者hend e