VUE axios发送跨域请求需要注意的问题
更新时间：2017年07月06日 14:09:20 作者：diamonds_A
本篇文章主要介绍了VUE axios发送跨域请求需要注意的问题，在实际项目中前端使用到vue，后端使用php进行开发。前端使用axios请求请求遇到的问题，有兴趣的可以了解一下
在实际项目中前端使用到vue，后端使用php进行开发。前端使用axios请求请求
关于跨域
跨域的概念这些就不说了，百度一大堆相关的资料信息。我就只在这里记录下我在使用当中遇到的问题，以纪念在逝去的几个小时中资料查找的艰辛。
不多说，直接上代码~~~~
同理，跨域的解决方案为cros。服务器 PHP端代码如下(laravel 中间件进行处理)：
public function handle($request, Closure $next)
{
if ($request->isMethod('OPTIONS')) {
$response = response('', 200);
} else {
$response = $next($request);
}
if (!method_exists($response, 'header')) {
return $response;
}
$response->header('Access-Control-Allow-Methods', 'HEAD, GET, POST, PUT, PATCH, DELETE, OPTIONS');
$response->header(
'Access-Control-Allow-Headers',
'Content-Type, Content-Length, Authorization, Accept, X-Requested-With, Token'
);
$response->header('Access-Control-Allow-Origin', '*');
$response->header('Access-Control-Max-Age', 86400);
return $response;
}
Vue端 axios 请求：
axios.post('http://XXXX.com',{name:'test'});
这样写，在请求的时候就会遇到：
很坑爹有没有？明明是已经设置好了的啊，为毛是这样？？？
查找了很多资料才发现，axios在发送数据时需要字符串的方式进行发送，也就是说是放在form-data当中的。在实际项目中，为了方便，我引入了 qs 来帮助处理这块数据：
解决后的代码应该是：
import qs from 'qs';
axios.post('http://xxxxx.com',qs.stringify({name:'test'})).then(re=>{
console.log(re);
});
OK,问题解决。明明感觉很简单，但是就是因为自己不懂，导致找了很久才知道原因，之前一直在折腾后台的设置，忽略了前端本身的处理。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue3+typescript实现图片懒加载插件，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下2020-10-10
这篇文章主要介绍了Vue的指令中实现传递更多参数，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
Vue Element前端应用开发之常规Element界面组件
在我们开发BS页面的时候，往往需要了解常规界面组件的使用，小到最普通的单文本输入框、多文本框、下拉列表，以及按钮、图片展示、弹出对话框、表单处理、条码二维码等等，本篇随笔基于普通表格业务的展示录入的场景介绍这些常规Element组件的使用2021-05-05
Vue v-for中:key中item.id与Index使用的区别解析
这篇文章主要介绍了Vue v-for中:key中item.id与Index使用的区别解析,推荐使用【:key="item.id"】而不是将数组下标当做唯一标识,前者能做到全部复用,本文给大家详细讲解,感兴趣的朋友跟随小编一起看看吧2024-02-02
这篇文章主要介绍了vantUI 获得piker选中值的自定义ID操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要为大家介绍了effect返回runner单测实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
这篇文章主要给大家介绍了关于Vue3中emits与attrs区别的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下2021-10-10
最近在写vue的一个项目要实现过渡的效果,虽然vue动画不是强项,库也多,但是基本的坑还是得踩扎实,下面这篇文章主要给大家介绍了关于Vue中实现过渡动画效果的相关资料,需要的朋友可以参考下2023-01-01
这篇文章主要给大家介绍了关于Vue3父子组件相互调用方法的相关资料,vue中我们常常用到组件,那么组件中互相调用也是经常遇到的,需要的朋友可以参考下2023-08-08
在Web应用中,倒计时功能常用于各种场景,如活动倒计时、定时任务提醒等,Vue.js作为一款轻量级的前端框架,提供了丰富的工具和API来实现这些功能,本文将详细介绍如何使用Vue.js实现一个循环倒计时功能,需要的朋友可以参考下2024-09-09
最新评论