axios原生请求设置请求头

17 篇文章 0 订阅
15 篇文章 0 订阅

工作中项目使用的是前端的Vue框架,请求用的是自己封装好的axios,api请求均已封装成方法,在页面中使用时直接import 然后写在自己的自定义触发方法中即可。 然而遇到一个棘手的问题就是有一个超级大的表单无论怎么调都是错误,服务端不能接受到参数,然后试着换成原生的页面请求后,服务端可以收到请求和参数,但是没有设置请求头token以至于服务端不认数据,所以在main.js中设置了axios的一些默认属性,网上的类似这种:

axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

事实上,有在http.js的interceptors.request拦截请求中有设置过“Authorization”,这样在main.js文件中设置后出错了,冲突了吧~
算了,咋整? 总得能搞的通吧, 只好在单页面中引入存储token的"js-cookie",注:js-cookie是一款方便易用的的cookie插件,npm安装引入即可
然后在页面的原生axios请求中配置请求头诸如Authorization,Content-Type之类的。如下:

this.$axios({
          method:"post",
          url:"http://192.168.2.203:9001/OrderApi/AddOrder/AddOrderByNetwork",
          data:params,            //参数
          headers:{
              "Authorization":Cookies.get('Admin-Token')     //请求头携带的token
          }
      })

okay,可以了~~~又可以愉快的往下走了, 表示虽然能提交响应了,但是大点的项目不建议这样写.

  • 1
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
原生axios发送请求的方法如下: 首先,导入axios模块: ``` import axios from 'axios'; ``` 然后,可以使用axios发送请求,例如发送一个GET请求: ``` axios.get('/api/user') .then(response => { console.log(response.data); }) .catch(error => { console.error(error); }); ``` 上述代码中,我们使用axios的get方法发送一个GET请求到`/api/user`,然后通过`.then()`方法处理响应结果,`.catch()`方法处理错误。 另外,如果需要在请求头中添加token进行身份验证,可以使用axios的拦截器,在请求拦截器中添加token到请求头中: ``` axios.interceptors.request.use(config => { const token = store.state.token; token && (config.headers.Authorization = token); return config; }, error => { return Promise.reject(error); }); ``` 上述代码中,我们先从store中获取到token,然后将其添加到请求头的Authorization字段中。 通过以上方法,我们可以使用原生axios发送请求,并在请求拦截器中添加token进行身份验证。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [原生ajax请求](https://blog.csdn.net/qq_45683232/article/details/129461286)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [vue发送ajax请求详解](https://download.csdn.net/download/weixin_38553648/12951134)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

kirinlau

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值